DOM節點
語雀連接
（1）文檔對象模型DOM
- 全稱：Document Object Model
- 文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）
- HTML文檔是由節點構成的集合，常見的三種DOM節點
- 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。
- 文本節點：向用戶展現的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
- 屬性節點：元素屬性，如<a>標籤的連接屬性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（元素一、屬性二、文本三、註釋八、文檔9）
<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)javascript
setAttribute
- setAttribute() 方法增長一個指定名稱和值的新屬性，或者把一個現有的屬性設定爲指定的值
elementNode.setAttribute(name,value)php
removeAttribute
object.removeAttribute("style");css
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>
相關文章
- 1. DOM節點
- 2. DOM 節點
- 3. jQuery DOM節點
- 4. JS dom節點
- 5. DOM節點操作
- 6. JavaScript的DOM節點
- 7. Dom節點總結
- 8. DOM節點分析
- 9. DOM 節點操做
- 10. javascript dom節點的
- 更多相關文章...
- • XML DOM 節點 - XML DOM 教程
- • XML DOM 節點樹 - XML DOM 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • 算法總結-廣度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. DOM節點
- 2. DOM 節點
- 3. jQuery DOM節點
- 4. JS dom節點
- 5. DOM節點操作
- 6. JavaScript的DOM節點
- 7. Dom節點總結
- 8. DOM節點分析
- 9. DOM 節點操做
- 10. javascript dom節點的