操作DOM物件（重點）
獲得DOM節點
<body>
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<p name="p3">p3</p>
</div>
<script>
//對應css選擇器
document.getElementsByTagName('h1');
document.getElementById('p1')
document.getElementsByClassName('p2')
document.getElementsByName('p3')
var father= document.getElementById('father')
// father.children;//獲取父節點下的所有子節點
</script>
</body>
這是原生代碼，后面都用jQuery
注意
document物件的三個查詢方法，如果有id屬性，優先使getElementById方法來進行查詢,
如果沒有id屬性，則優先使用getElementsByName方法來進行查詢,
如果id屬性和name屬性都沒有最后再按標簽名查getElcmentsByTagName
以上三個方法，一定要在頁面加載完成之后執行,才能查詢到標簽物件，
要不然就都寫在這里面
window.οnlοad=function(){
}
其他的一些屬性
更新DOM節點
<body>
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1');
id1.innerText='456';
id1.innerHTML='<strong>789</strong>'
</script>
</body>
id1.innerText='456'; 不會決議html文本標簽
id1.innerHTML='<strong>789</strong>' 會決議html文本標簽
總而言之innerHTML 比 innerText 更強大，用innerHTML就行
操作js
<body>
<div id="id1">
123
</div>
<script>
var id1=document.getElementById('id1');
id1.style.color='red';
id1.style.fontSize='20px';
</script>
洗掉DOM節點
洗掉節點的步驟：先獲取父節點，在通過父節點洗掉自己
<body>
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var p1= document.getElementById('p1')
var father= document.getElementById('father')
father.removeChild(p1);
</script>
</body>
注意洗掉多個節點的時候，children是在時刻變化的，洗掉節點的時候一定要注意！
<body>
<div id="father">
<h1>標題一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var p1= document.getElementById('p1')
var father= document.getElementById('father')
//洗掉是一個動態的程序
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);//會報錯
</script>
</body>
插入節點
追加一個節點
<body>
<p id="js">javascript</p>
<div id="list">
<p id="ee">javaee</p>
<p id="se">javase</p>
<p id="me">javame</p>
</div>
<script>
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js); //追加
</script>
</body>
創建一個新的節點
<body>
<p id="js">javascript</p>
<div id="list">
<p id="ee">javaee</p>
<p id="se">javase</p>
<p id="me">javame</p>
</div>
<script>
var js=document.getElementById('js');
var list=document.getElementById('list'); //創建一個新的節點
//相當于<p id="newP">hello</p>
var newP=document.createElement('p');
newP.id='newP';
newP.innerHTML='hello';
list.appendChild(newP);</script></body>
創建一個標簽節點
<script>
var js=document.getElementById('js');
var list=document.getElementById('list'); //創建一個新的節點 //相當于<p id="newP">hello</p>
var newP=document.createElement('p');
newP.id='newP'; //newP.setAttribute('id','newP')
newP.innerHTML='hello';
list.appendChild(newP); //創建一個標簽節點 <script type="text/javascript" src=""></script>
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.appendChild(myScript);</script>
//相當于 <style type="text/css"> body{
// background-color: red; } </style> //可以創建一個StyLe標簽
var myStyle= document.createElement('style');//創建了一個空style標簽
myStyle.setAttribute('type','text/css' );
myStyle.innerHTML = 'body{background-color: red;}'; //沒置標簽內容
document.getElementsByTagName( 'head' )[0].appendChild(myStyle)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290453.html
標籤：其他
下一篇：js學習筆記（一）