DOM節點
阿新 • • 發佈：2020-11-21
（1）文件物件模型DOM
- 全稱：Document Object Model
- 文件物件模型DOM（Document Object Model）定義訪問和處理HTML文件的標準方法。DOM 將HTML文件呈現為帶有元素、屬性和文字的樹結構（節點樹）
- HTML文件是由節點構成的集合，常見的三種DOM節點
- 元素節點：上圖中、、
等都是元素節點，即標籤。
- 文字節點：向用戶展示的內容，如
- ... 中的JavaScript、DOM、CSS等文字。
- 屬性節點：元素屬性，如標籤的連結屬性href="http://www.imooc.com"。
- 元素節點：上圖中、、
（2）document根節點
- 相關方法都封裝在document物件中，document是整個文件的根節點
- 輸出內容(document.write)
- 輸出HTML標籤
var mystr="hello";
document.write(mystr+"<br>");//輸出hello後，輸出一個換行符
- 輸出空格
document.write(" 1 2 3 ");//只會有一個空格
結果: 1 2 3
document.write("aa"+" "+"的忠實粉絲!");
（3）節點的訪問
getElementById()
- id是唯一的
- 如果存在多個相同的id，則返回第一個
var mychar= document.getElementById('id');
getElementsByName()
- 因為文件中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的陣列，而不是一個元素
var mynode= document.getElementsByName('myt') console.log(mynode.length) console.log(mynode[0]) <input name="myt" type="text" value="1"> <input name="myt" type="text" value="2"> <input name="myt" type="text" value="3"> <input name="myt" type="text" value="4"> <input name="myt" type="text" value="5"> <input name="myt" type="text" value="6">
getElementsByClassName
<div class="con">11</div>
<div class="con">22</div>
<div class="con">33</div>
<script type="text/javascript">
var divs = document.getElementsByClassName('con')
console.log(divs.length)
</script>
getElementsByTagName()
- 返回帶有指定標籤名的節點物件的集合
querySelector
- 只得到符合條件的第一個元素
<div id="container">
<p class="name">111</p>
<p class="name">222</p>
<p class="name">333</p>
</div>
<script type="text/javascript">
var item = document.querySelector('#container .name')
// <p class="name">111</p>
console.log(item)
</script>
querySelectorAll
- 符合條件的所有元素
<div id="container">
<p class="name">111</p>
<p class="name">222</p>
<p class="name">333</p>
</div>
var item = document.querySelectorAll('#container .name')
// 3
console.log(item.length)
// <p class="name">111</p>
console.log(item[0])
childNodes
- IE瀏覽器會忽略節點之間生成的空白文字節點，而其它瀏覽器不會。
- 我們可以通過檢測節點型別過濾子節點
<div>
<p id="name">javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var aa = document.getElementsByTagName('div')[0].childNodes;
// 7
console.log(aa.length)
// #text, ,3 文字節點(空白)
// p, null, 1 元素節點
// #text, , 3 文字節點(空白)
// div, null, 1 元素節點
// #text, ,3 文字節點(空白)
// H5, null, 1 元素節點
// #text, , 3 文字節點(空白)
for (var i = 0; i < aa.length; i++) {
console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType);
}
</script>
children
- children可以避免文字節點，只考慮元素節點
<div>
<p id="name">javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var aa = document.getElementsByTagName('div')[0].children;
// p, null, 1 元素節點
// div, null, 1 元素節點
// H5, null, 1 元素節點
for (var i = 0; i < aa.length; i++) {
console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType);
}
</script>
firstChild
- 該屬性返回‘childNodes’陣列的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL
- node.firstChild
- 說明：與elementNode.childNodes[0]是同樣的效果。
firstElementChild
- 可以避免文字節點，只考慮元素節點
lastChild
- lastChild 最後一個子節點
- 該屬性返回‘childNodes’陣列的最後一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL
- node.lastChild
- 說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
lastElementChild
- 可以避免文字節點，只考慮元素節點
parentNode
- 獲取指定節點的父節點
<div id="text">
<p id="con"> parentNode 獲取指點節點的父節點</p>
</div>
<script type="text/javascript">
var mynode = document.getElementById("con");
// DIV
console.log(mynode.parentNode.nodeName)
</script>
nextSibling
nextElementSibling
previousSibling
previousElementSibling
- 訪問兄弟節點nextSibling previousSibling
- nextSibling 屬性可返回某個節點之後緊跟的節點（處於同一樹層級中）。 如果無此節點，則該屬性返回 null
- previousSibling 屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。如果無此節點，則該屬性返回 null。
- 注意事項
- 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文字節點（例如，換行符號），而其它瀏覽器不會忽略
- 解決問題方法：判斷節點nodeType是否為1, 如是不為元素節點，跳過。
- nextElementSibling可以避免文字節點，只考慮元素節點
- previousElementSibling可以避免文字節點，只考慮元素節點
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
（4）節點型別
- 元素節點、屬性節點、文字節點都有三個重要屬性
- 節點名 nodeName
- 節點值 nodeValue
- 節點型別 nodeType（元素1、屬性2、文字3、註釋8、文件9）
| 節點型別 | nodeName | nodeValue | nodeType |
| --- | --- | --- | --- |
| 元素節點 | 標籤名 | undefined/null | 1 |
| 屬性節點 | 屬性名 | 屬性值 | 2 |
| 文字節點 | #text | 文字自身 | 3 |
<div>
<p id="name">javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var aa = document.getElementsByTagName('div')[0].childNodes;
// 7
console.log(aa.length)
// #text, ,3 文字節點(空白)
// p, null, 1 元素節點
// #text, , 3 文字節點(空白)
// div, null, 1 元素節點
// #text, ,3 文字節點(空白)
// H5, null, 1 元素節點
// #text, , 3 文字節點(空白)
for (var i = 0; i < aa.length; i++) {
console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType);
}
</script>
- 屬性節點
for (var i = 0; i < aa.length; i++) {
if(aa[i].nodeName == 'P'){
// 子節點
var ps = aa[i].childNodes
// 1
console.log(ps.length)
// #text,javascript,3
for(let j = 0; j < ps.length; j++){
console.log(ps[j].nodeName + ',' + ps[j].nodeValue + ',' + ps[j].nodeType)
}
var attrs = aa[i].attributes
// 1
console.log(attrs.length)
// id,name,2
for(let j = 0; j < attrs.length; j++){
console.log(attrs[j].nodeName + ',' + attrs[j].nodeValue + ',' + attrs[j].nodeType)
}
}
}
- 其他節點
// 文件節點
// #document undefined 9
console.log(document.nodeName,document.nodeValue,document.nodeType)
for (var i = 0; i < document.childNodes.length; i++) {
var item = document.childNodes[i]
// html undefined 10 文件宣告節點
// HTML undefined 1 html元素節點
console.log(item.nodeName,item.nodeValue,item.nodeType)
}
// BODY undefined 1 BODY節點
console.log(document.body.nodeName,document.body.nodeValue,document.body.nodeType)
// HEAD undefined 1 HEAD節點
console.log(document.head.nodeName,document.head.nodeValue,document.head.nodeType)
（5）節點屬性
innerHTML
- 設定元素的文字內容，支援HTML各類標籤
innerText
- 純文字方式設定元素的文字內容
<div id="div1">
<span>sss</span>
</div>
<script type="text/javascript">
var mychar = document.getElementById('div1');
// 網頁上顯示dddd
mychar.innerHTML = '<span>dddd</span>'
// <span>dddd</span>
console.log(mychar.innerHTML);
// 網頁上顯示<span>dddd</span>
mychar.innerText = '<span>dddd</span>'
// <span>dddd</span>
console.log(mychar.innerText);
</script>
style
- backgroudColor
- width
- height
- color
- font
- fontFamily
- display
- none：該元素不會被顯示
- block：該元素會被顯示為塊級元素
mychar.style.color='red';
mychar.style.fontSize='20';
mychar.style.backgroundColor='blue';
mychar.style.height='30px';
mychar.style.width='250px';
mychar.style.display = 'block';
className
- 設定元素的類選擇器
- className也可以在attributes陣列中找到
var p1 = document.getElementById("p1");
p1.className="one";
getAttribute
- 通過元素節點的屬性名稱獲取屬性的值
elementNode.getAttribute(name)
setAttribute
- setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值
elementNode.setAttribute(name,value)
removeAttribute
object.removeAttribute("style");
attributes
- 返回該節點的所有屬性，是一個數組
<div id="div1" class="top" style="width: 100px;">
<span>sss</span>
</div>
<script type="text/javascript">
var mychar = document.getElementById('div1');
var attrs = mychar.attributes
// 3
console.log(attrs.length)
// id
// class
// style
for(let i = 0; i < attrs.length; i++){
console.log(attrs[i])
}
</script>
（6）節點操作
createElement()
- createElement()方法可建立元素節點。此方法可返回一個 Element 物件
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "建立一個按鈕";
body.appendChild(input);
</script>
appendChild()
- 插入節點appendChild()：在指定節點的最後一個子節點列表之後新增一個新的子節點。
- ul新增一個li，內容為PHP
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
</head>
<body>
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var add = document.createElement('li');
add.innerHTML = "PHP";
otest.appendChild(add);
</script>
</body>
</html>
- 下面的例子會發現p在div2中了，div1中沒有了
<div id="div1">
<p id="p1">aaa</p>
</div>
<div id="div2"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var p1 = document.getElementById('p1')
div2.appendChild(p1)
</script>
- appendChild不要重複新增
<div id="div1">
<div id="div2">2222</div>
</div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var div3 = document.createElement('div');
div3.innerHTML = '3333'
// div3 div2並列
div1.appendChild(div3);
// div3在div2裡面，並且之前並列的div3不見了
//div2.appendChild(div3);
</script>
insertBefore
- insertBefore() 方法可在已有的子節點前插入一個新的子節點。
- 語法：insertBefore(newnode,node);
- newnode: 要插入的新節點。
- node: 指定此節點前插入節點。
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var add = document.createElement('li');
add.innerHTML = "PHP";
otest.insertBefore(add, otest.childNodes[2]);
</script>
removeChild
- 必須父節點呼叫
- removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL
- 注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在記憶體中，可通過 x=null操作
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<script type="text/javascript">
var content = document.getElementById("content");
for (var i = content.childNodes.length - 1; i >= 0; i--) { // 倒敘刪除
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
</script>
<button onclick="clearText()">清除節點內容</button>
replaceChild
- replaceChild 實現子節點(物件)的替換。返回被替換物件的引用。
- 語法：node.replaceChild (newnode,oldnew )
- 引數：
- newnode : 必需，用於替換 oldnew 的物件
- oldnew : 必需，被 newnode 替換的物件
- b標籤換成i
<div>
<b id="oldnode">JavaScript</b>是一個很常用的技術，為網頁新增動態效果。
</div>
<a href="javascript:replaceMessage()"> 將加粗改為斜體</a>
<script type="text/javascript">
function replaceMessage() {
var oldnode = document.getElementById("oldnode");
var oldHTML = oldnode.innerHTML;
var newnode = document.createElement("i");
oldnode.parentNode.replaceChild(newnode, oldnode);
newnode.innerHTML = oldHTML;
}
</script>
createTextNode()
- 建立文字節點
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style type="text/css">
.message {
width: 200px;
height: 100px;
background-color: #CCC;
}
</style>
</head>
<body>
<script type="text/javascript">
var element = document.createElement("p");
element.className = "message";
var textNode = document.createTextNode("I love JavaScript!");
element.appendChild(textNode);
document.body.appendChild(element);
</script>
</body>
</html>
cloneNode(true)
- true：深度克隆，所有子節點會被克隆
- false：只會克隆節點自身
- 節點操作後，節點原位置會丟失
- 下面的例子會發現p在div2中了，div1中沒有了
<div id="div1">
<p id="p1">aaa</p>
</div>
<div id="div2"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var p1 = document.getElementById('p1')
div2.appendChild(p1)
</script>
- 克隆
<div id="div1">
<p id="p1">aaa</p>
</div>
<div id="div2"></div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var p1 = document.getElementById('p1')
var p2 = p1.cloneNode(true);
div2.appendChild(p2)
</script>