13.节点操作上，下
生活随笔
收集整理的這篇文章主要介紹了
13.节点操作上，下
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
nodeValue
概念：該屬性用來返回或設置當前節(jié)點的值。
注意：對于元素節(jié)點,本身不包含文本所以nodeValue不可用，對于文本節(jié)點 nodeValue = 文本值，對于屬性節(jié)點 nodeValue = "屬性值"
語法：
var str = node.nodeValue; node.nodeValue = str;nodeName
概念：只讀屬性用來返回當前節(jié)點的節(jié)點名稱
- 對于元素節(jié)點 nodeName = 標簽名(返回的名稱是大寫的)
- 對于文本節(jié)點 nodeName = #text
- 對于屬性節(jié)點 nodeName = 屬性名(返回的名稱是大寫的)
語法:
var str = node.nodeName;例子：
<div id="d1">hello world</div><script> var div1 = document.getElementById("d1");console.log(div1.nodeName); // DIV </script>nodeType
概念：只讀屬性 Node.nodeType 表示的是該節(jié)點的類型。可用來區(qū)分不同類型的節(jié)點，比如 元素, 文本 和 注釋。
- 對于元素節(jié)點 nodeType === 1 即一個元素節(jié)點，例如 <p> 和 <div>。
- 對于屬性節(jié)點 nodeType === 2 寄一個元素的屬性
- 對于文本節(jié)點 nodeType === 3 即元素 或者 屬性 中實際的 文字
- 對于文檔元素 nodeType === 9 即 一個 Document 節(jié)點。
- 對于注釋元素 nodeType === 8
語法:
例子：
<p>123</p> <script> document.nodeType === 9; // truevar p = document.getElementById("p"); p.textContent = "很久很久以前...";p.nodeType === 1; // true p.firstChild.nodeType === 3; // true</script>- 該示例會檢查 document 下第一個節(jié)點是不是注釋，如果不是，則會提醒。
元素節(jié)點之間的遍歷
Node.previousSibling 返回當前節(jié)點的前一個兄弟節(jié)點,沒有則返回null.
語法：
var previousNode = element.previousSibling例子
// <a><b1 id="b1"/><b2 id="b2"/></a> alert(document.getElementById("b1").previousSibling); // null alert(document.getElementById("b2").previousSibling.id); // "b1"注意：Gecko內(nèi)核的瀏覽器會在源代碼中標簽內(nèi)部有空白符的地方插入一個文本結(jié)點到文檔中。因此,使用諸如 Node.firstChild、 Node.previousSibling、Node.nextSibling、Node.lastChild之類的方法可能會引用到一個空白符文本節(jié)點, 而不是使用者所預期得到的節(jié)點。
Node.nextSibling 返回前節(jié)點緊跟在其后面的兄弟節(jié)點，如果指定的節(jié)點為最后一個節(jié)點，則返回 null。
語法：
var nextNode = element.nextSibling例子
<div id="div-01">Here is div-01</div> <div id="div-02">Here is div-02</div><script type="text/javascript"> var el = document.getElementById('div-01').nextSibling,i = 1;console.log('Siblings of div-01:');while (el) {console.log(i + '. ' + el.nodeName);el = el.nextSibling;i++; } /**************************************************Siblings of div-011. #text2. DIV3. #text4. SCRIPT**************************************************/ </script>從上面的例子中可以看出，在兩個標簽之間（即一個元素的閉合標簽之后，下一個元素的起始標簽之前）有空白出現(xiàn)時，會有#text 節(jié)點被插入到 DOM 中。
Node.firstChild 返回當前節(jié)點的第一個子節(jié)點,如果節(jié)點是無子節(jié)點，則返回 null。
語法：
var childNode = element.firstChild;例子: firstChild屬性的用法以及空白符節(jié)點對該屬性的使用可能造成的影響
<p id="para-01"><span>First span</span> </p><script type="text/javascript">var p01 = document.getElementById('para-01');alert(p01.firstChild.nodeName) </script><p id="para-02"><span>First span</span></p><script type="text/javascript">var p02 = document.getElementById('para-02');alert(p02.firstChild.nodeName) // 'SPAN' </script>Node.lastChild 返回當前節(jié)點的最后一個子節(jié)點。如果父節(jié)點為一個元素節(jié)點，則子節(jié)點通常為一個元素節(jié)點，或一個文本節(jié)點，或一個注釋節(jié)點。如果沒有子節(jié)點，則返回 null。
語法：
var lastChild = element.lastChild例子:
var tr = document.getElementById("row1"); var corner_td = tr.lastChild;「課堂練習」
**
將列表中商家距離轉(zhuǎn)換為指定格式
**
要求：
- 列表中所有商家列表默認格式為<div class="seller"><h3>商家名</h3><span class="distance">距離</span></div>
- 例：<div class="seller"><h3>必勝客</h3><span class="distance">150</span></div>
- 要求將頁面中所有商家的距離元素內(nèi)文本內(nèi)容修改成指定格式
- 當距離小于 50 時展示 <50m
- 當距離小于 1000 時展示 xxxm，例 800 轉(zhuǎn)換為 800m
- 當距離大于等于 1000 時展示 x.xKM，例 4753 轉(zhuǎn)換為 4.7km
- 當距離有誤時展示 null
部分代碼
<div class="seller"><h3>商家名</h3><span class="distance">30</span></div><div class="seller"><h3>KFC</h3><span class="distance">1800</span></div><div class="seller"><h3>麥當勞</h3><span class="distance">600</span></div><div class="seller"><h3>漢堡王</h3><span class="distance">2752</span></div><div class="seller"><h3>海底撈</h3><span class="distance">4412</span></div><div class="seller"><h3>喜茶</h3><span class="distance">5300</span></div><script>var spans=document.querySelectorAll(".distance");spans.forEach(function(sp,index){// console.log(sp.firstChild.nodeValue)var distance=sp.firstChild.nodeValue;//獲取span里面第一個子節(jié)點即文本節(jié)點的值 distance存儲的是基礎數(shù)據(jù).var changeValue=null; if(distance<50){changeValue ="<"+50+"m";}else if(distance<1000){changeValue =distance+"m";}else if(distance>=1000){// sp.firstChild.nodeValue=(distance/1000).toFixed(1)+"km"changeValue =parseInt(distance/100)/10+"km"}else{changeValue=null;}sp.firstChild.nodeValue=changeValue;});</script>空白節(jié)點
介紹：絕大多數(shù)瀏覽器,都會把元素之間的空白當做文本節(jié)點來處理,所以上面四個屬性可能會返回空白元素即空白節(jié)點。DOM 中的空白符會讓處理節(jié)點結(jié)構(gòu)時增加不少麻煩導致：
- 有些空白符會自成一個文本節(jié)點。
- 有些空白符會與其他文本節(jié)點合成為一個文本節(jié)點。
例子:
<html> <head><title>My Document</title> </head> <body><h1>Header</h1><p>Paragraph</p> </body> </html>其中“\n”代表換行符,要使用 DOM 游走于節(jié)點結(jié)構(gòu)間又不想要無用的空白符時就需要使用JavaScript 代碼排除空白節(jié)點
排除空白節(jié)點
function getPrevElement(text){ var prev = text.previousSibling; // element.nodeType == 1 是一個非空白節(jié)點 while (prev.nodeType !=1) { console.log(prev);prev = prev.previousSibling;}return prev; }除此以外JavaScript還提供了四個屬性，解決上面四個屬性獲取空白節(jié)點的問題可以直接獲取元素節(jié)點
previousElementSibling 返回當前元素在其父元素的子元素節(jié)點中的前一個元素節(jié)點,如果該元素已經(jīng)是第一個元素節(jié)點,則返回null。
語法：
var prevNode = elementNode.previousElementSibling;例子：
<div id="div-01">Here is div-01</div> <div id="div-02">Here is div-02</div> <li>This is a list item</li> <li>This is another list item</li> <div id="div-03">Here is div-03</div><script type="text/javascript">var el = document.getElementById('div-03').previousElementSibling;document.write('<p>Siblings of div-03</p><ol>');while (el) {document.write('<li>' + el.nodeName + '</li>');el = el.previousElementSibling;}document.write('</ol>');/*Siblings of div-031. LI2. LI3. DIV4. DIV*/ </script>nextElementSibling 返回當前元素在其父元素的子元素節(jié)點中的后一個元素節(jié)點,如果該元素已經(jīng)是最后一個元素節(jié)點,則返回null。
語法：
var nextNode = elementNode.nextElementSibling;例子：
<div id="div-01">Here is div-01</div> <div id="div-02">Here is div-02</div><script type="text/javascript">var el = document.getElementById('div-01').nextElementSibling;document.write('<p>Siblings of div-01</p>');document.write('<p>' + el.nodeName + '</p>');/**Siblings of div-01DIV*/ </script>firstElementChild 返回對象的第一個子 元素, 如果沒有子元素，則為null。
語法：
var element = node.firstElementChild;例子：
<ul id="foo"><li>First (1)</li><li>Second (2)</li><li>Third (3)</li> </ul><script> var foo = document.getElementById('foo'); //<li>First (1)</li> console.log(foo.firstElementChild); </script>lastElementChild：返回對象的最后一個子元素，如果沒有子元素，則返回 null。
語法：
var element = node.lastElementChild;例子：
<ul id="foo"><li>First (1)</li><li>Second (2)</li><li>Third (3)</li> </ul><script> var foo = document.getElementById('foo'); //<li>First (3)</li> console.log(foo.lastElementChild); </script>節(jié)點的操作/修改
nodeValue
概念：僅在文本節(jié)點操作時該屬性可以用來更新文本節(jié)點
<p id="demo">修改我的內(nèi)容</p><script>var x=document.getElementById("demo"); // 獲取文本節(jié)點并修改 x.childNodes[0].nodeValue = "change"</script>innerHTML
概念：屬性設置或獲取HTML語法表示的元素的后代。
語法：
// 取值 const content = element.innerHTML; // 設置 element.innerHTML = htmlString;注意：
- 如果一個 <div>, <span>, 或 <noembed> 節(jié)點有一個文本子節(jié)點，該節(jié)點包含字符 &, <, 或 >, innerHTML 將這些字符分別返回為&, < 和 >使用 textContent 可獲取一個這些文本節(jié)點內(nèi)容的正確副本。
- 設置元素的 innerHTML 將會刪除所有該元素的后代并以上面給出的 htmlString 替代。
例子：
var logElem = document.querySelector(".log");var time = new Date();var timeStr = time.toLocaleTimeString();logElem.innerHTML += timeStr + ": " + msg + "<br/>";「課堂練習」
根據(jù)用戶評分，調(diào)整評論列表文本樣式
要求：
- 列表中所有商家列表默認格式為
- 例：
- 要求評分低于3分都視為差評，否則都視為好評
- 當為差評時class="score"元素字體顏色為#ccc，反之元素字體顏色為#fc0
- 當為差評時用戶評論內(nèi)容元素字體顏色為#ccc，反之元素字體顏色為#0af
- 并且根據(jù)差評好評給用戶評論內(nèi)容添加 “差評：”、“好評” 字樣。例"
好評：這家飯店很好吃，菜品價格親民。喜歡吃辣的小伙伴值得一試。
"
部分代碼
<ul class="rating-list"><li class="rating-item"><h3 class="username">用戶名</h3><p>用戶評論內(nèi)容</p><span class="score">2.8</span></li><li class="rating-item"><h3 class="username">某團用戶</h3><p>這家飯店很好吃，菜品價格親民。喜歡吃辣的小伙伴值得一試。</p><span class="score">4.5</span></li><li class="rating-item"><h3 class="username">某餓了用戶</h3><p>可能我吃不了辣，對于我來說太辣了</p><span class="score">1.8</span></li><li class="rating-item"><h3 class="username">某點評用戶</h3><p>同事們對這家店一致好評！已經(jīng)是部門聚餐指定地點了</p><span class="score">4.9</span></li></ul><script>//獲取所有的score元素，獲取元素之間內(nèi)容 分數(shù). 如果分數(shù)<3 設置當前score元素的顏色為#ccc//并且要查找當前score的前一個元素 并設置它顏色為#ccc 還要在里面添加一個內(nèi)容 差評:xxxxxxxvar scores=document.querySelectorAll(".score");//獲取多個元素. 返回是一個nodeList集合對象【數(shù)組】scores.forEach(function(span,index){var value=span.innerHTML;//獲取span.score之間的內(nèi)容var prevp=span.previousElementSibling;//獲取span的前一個元素pif(value<3){//差評span.style.color="#ccc"; //設置span自己的顏色為灰色prevp.style.color='#ccc';//設置style顏色為#cccprevp.innerHTML="差評:"+prevp.innerHTML;//給元素p的內(nèi)容前面 添加一個 差評}else{//好評span.style.color="#fc0";prevp.style.color="#0af";prevp.innerHTML="好評"+prevp.innerHTML;}});</script>textContent
概念:返回一個節(jié)點及其后代的文本內(nèi)容,textContent 的值取決于具體情況：
- 如果節(jié)點是一個 document，或者一個 DOCTYPE ，則 textContent 返回 null。
- 如果節(jié)點是個 注釋、文本節(jié)點，textContent 返回節(jié)點內(nèi)部的文本內(nèi)容，例如 Node.nodeValue。
- 對于元素節(jié)點類型，textContent 將所有子節(jié)點的 textContent 合并后返回
語法
var text = someNode.textContent; someOtherNode.textContent = string;注意：textContent 與 innerHTML 的區(qū)別：
- Element.innerHTML 返回 HTML。通常，為了在元素中檢索或?qū)懭胛谋?#xff0c;人們使用 innerHTML。但是，textContent 通常具有更好的性能，因為文本不會被解析為HTML。
- 使用 textContent 可以防止 XSS 攻擊
例子：
<div id="divA">This is <span>some</span> text!</div><script> // 你可以使用 textContent 去獲取該元素的文本內(nèi)容 var text = document.getElementById('divA').textContent;// 'This is some text!'// 或者設置元素的文字內(nèi)容： document.getElementById('divA').textContent = 'This text is different!'; // <div id="divA">This text is different!</div> </script>innerText
介紹： 該屬性表示一個節(jié)點及其后代的“渲染”文本內(nèi)容，
注意：請避免使用該方法，因為他不會返回任何一個被css隱藏了的標簽。（并且因為要判斷元素是否渲染導致該api很消耗性能）
語法
textContent 與 innerText 的區(qū)別：
- textContent 會獲取所有元素的內(nèi)容，包括 <script> 和 <style> 元素，然而 innerText 只展示給人看的元素。
- textContent 會返回節(jié)點中的每一個元素。相反，innerText 受 CSS 樣式的影響，并且不會返回隱藏元素的文本，
- 與 textContent 不同的是, 在 Internet Explorer (小于和等于 11 的版本) 中對 innerText 進行修改， 不僅會移除當前元素的子節(jié)點，而且還會永久性地破壞所有后代文本節(jié)點。在之后不可能再次將節(jié)點再次插入到任何其他元素或同一元素中。
例子：
<h3>Source element:</h3> <p id="source"><style>#source { color: red; }</style> Take a look at<br>how this text<br>is interpretedbelow.<span style="display:none">HIDDEN TEXT</span> </p> <h3>Result of textContent:</h3> <textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea> <h3>Result of innerText:</h3> <textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea><script> var source = document.getElementById('source'); var textContentOutput = document.getElementById('textContentOutput'); var innerTextOutput = document.getElementById('innerTextOutput');textContentOutput.innerHTML = source.textContent; innerTextOutput.innerHTML = source.innerText; </script>補充表單元素常用屬性
.value
介紹： 該屬性可設置或者返回表單元素的 value 屬性值。
語法：
// 返回 value 屬性 textObject.value// 設置 value 屬性 textObject.value = text例子：
<input type="text" name="name" value="ajanuw"><select name="form-select" class="asd"><option value="a" selected>aaa</option><option value="b" selected>bbb</option><option selected>ccc</option></select><textarea cols="30" rows="10">hello world</textarea><script>var input = document.querySelector('input')var select = document.querySelector('select')var textarea = document.querySelector('textarea')input.value = 'hello world'console.log(select.value) // ccctextarea.value = "你好"</script>.placeholder
介紹： 該屬性可設置或者返回表單元素的 placeholder 屬性值。
語法：
// 返回 placeholder 屬性 textObject.placeholder// 設置 placeholder 屬性 textObject.placeholder = "請輸入密碼"xtarea cols=“30” rows=“10”>hello world
<script>var input = document.querySelector('input')var select = document.querySelector('select')var textarea = document.querySelector('textarea')input.value = 'hello world'console.log(select.value) // ccctextarea.value = "你好" </script> ### .placeholder **介紹**： 該屬性可設置或者返回表單元素的 placeholder 屬性值。**語法**： ```javascript // 返回 placeholder 屬性 textObject.placeholder// 設置 placeholder 屬性 textObject.placeholder = "請輸入密碼"節(jié)點的操作方法
createElement() 方法用于創(chuàng)建一個由標簽名稱 tagName 指定的 HTML 元素并返回。
語法：
var element = document.createElement(tagName);- 參數(shù)
- tagName: 一個指定要創(chuàng)建元素類型的字符串,創(chuàng)建元素時的 nodeName 使用 tagName 的值為初始化，
例子：
- 獲取文檔中所有<p>元素的NodeList。
appendChild() ：方法將一個節(jié)點附加到指定父節(jié)點的子節(jié)點列表的末尾處。如果將被插入的節(jié)點已經(jīng)存在于當前文檔的文檔樹中，那么 appendChild() 只會將它從原先的位置移動到新的位置（不需要事先移除要移動的節(jié)點）。
語法：
element.appendChild(aChild)- 參數(shù)
- aChild: 要追加給父節(jié)點（通常為一個元素）的節(jié)點。
注意：一個節(jié)點不可能同時出現(xiàn)在文檔的不同位置。所以，如果某個節(jié)點已經(jīng)擁有父節(jié)點，在被傳遞給此方法后，它首先會被移除，再被插入到新的位置。
例子：
<!DOCTYPE html> <html> <head><title>||Working with elements||</title> </head> <body><div id="div1">這里的文本是動態(tài)創(chuàng)建的。</div> </body> </html><script>// 創(chuàng)建一個新的 div 元素var newDiv = document.createElement("div");newDiv.textContent = '設置一段文本';// 將這個新的元素和它的文本添加到 DOM 中var currentDiv = document.getElementById("div1");currentDiv.appendChild(newDiv);</script>「課堂練習」
給之前創(chuàng)建的便捷DOM原型對象增加功能
回顧之前的便捷DOM原型對象：
要求增加功能：
部分代碼：
<div id="app"></div> <ul class="list"><li>item-1</li><li>item-2</li><li>item-3</li><li>item-4</li><li>item-5</li></ul> <script>// 補充代碼function EasyElement (selector) {}// 將id=app的div轉(zhuǎn)化成 `EasyElement實例` var easyApp = new EasyElement('#app') // 初始化console.log(easyApp.selector) // "#app"console.log(easyApp.el) // "NodeList(1)"console.log(easyApp.length) // 1easyApp.setClassName('.test .app') // 所有元素class屬性為 '.test .app'easyApp.setStyle({ // 設置所有元素style樣式backgroundColor: '#ccc'})// 使用創(chuàng)建一個h2元素的EasyElement實例var easyH2 = new EasyElement('<h2>') // 初始化console.log(easyH2.selector) // "<h2>"console.log(easyH2.el) // "Array(1)" 這里是個數(shù)組包含一個創(chuàng)建出來的 h2 元素console.log(easyH2.length) // 1easyH2.setClassName('item') // 所有元素class屬性為 '.test .app'easyH2.setStyle({ // 設置所有元素style樣式color: 'red',backgroundColor: '#ccc',border: '1px solid #fc0'})easyH2.html(123132131)console.log(easyH2.html()) // 123132131// easyH2.append('.list') // 將easyH2添加至選擇器值為'.list'的第一個元素內(nèi)部// easyH2.append(document.getElementById('app')) // 將easyH2添加至指定DOM節(jié)點中easyH2.append(easyApp) // 將easyH2 添加至指定的其他 EasyElement實例第一個元素中 </script>createTextNode() 創(chuàng)建一個新的文本節(jié)點。這個方法可以用來轉(zhuǎn)義 HTML 字符。
語法：
// text 是一個文本節(jié)點。 var text = document.createTextNode(data);- 參數(shù)
- data: 是一個字符串，包含了要放入文本節(jié)點的內(nèi)容。
例子：
<!DOCTYPE html> <html> <head><title>||Working with elements||</title> </head> <body><div id="div1">這里的文本是動態(tài)創(chuàng)建的。</div> </body> </html><script>// 創(chuàng)建一個新的 div 元素var newDiv = document.createElement("div");// 動態(tài)創(chuàng)建文本節(jié)點var newContent = document.createTextNode("被創(chuàng)建的文本節(jié)點");// 添加文本節(jié)點 到這個新的 div 元素newDiv.appendChild(newContent);// 將這個新的元素和它的文本添加到 DOM 中var currentDiv = document.getElementById("div1");currentDiv.appendChild(newDiv);</script>removeChild(): 方法從DOM中刪除一個子節(jié)點。返回刪除的節(jié)點。
語法：
var oldChild = node.removeChild(child);- 參數(shù)
- child: 是要移除的那個子節(jié)點.
注意：被移除的這個子節(jié)點仍然存在于內(nèi)存中,只是沒有添加到當前文檔的DOM樹中,因此,你還可以把這個節(jié)點重新添加回文檔中。但是若要實現(xiàn)次功能徐亞用另外一個變量比如上例中的oldChild來保存這個節(jié)點的引用。 如果沒有使用變量, 即沒有使用 oldChild 來保存對這個節(jié)點的引用, 則認為被移除的節(jié)點已經(jīng)是無用的, 在短時間內(nèi)將會被內(nèi)存管理回收。
例子：
<div id="top" align="center"><div id="nested"></div> </div><script type="text/javascript">var top = document.getElementById("top");var nested = document.getElementById("nested");// 第一次調(diào)用正確地刪除節(jié)點var garbage = top.removeChild(nested);// 第二次調(diào)用中的方法拋出異常garbage = top.removeChild(nested);</script>其他方法: document.write() 向頁面添加內(nèi)容（不推薦使用）
訪問或更新屬性值
getAttributeNode
getAttributeNode() 返回指定元素的指定屬性節(jié)點
語法：
// attrNode 獲得的屬性返回值，是Attr 節(jié)點， nodeType 為 2 var attrNode = element.getAttribute(attribute)- 參數(shù)
- attrName : 是一個包含屬性名稱的字符串
例子：
// html: <div id="top" /> var t = document.getElementById("top"); var idAttr = t.getAttributeNode("id"); alert(idAttr.value == "top")注意：
hasAttribute
hasAttribute() 返回一個布爾值，指示該元素是否包含有指定的屬性（attribute）。
語法：
// result 為返回的布爾值：true 或 false。 var result = element.hasAttribute(attName);- 參數(shù)
- attrName : 是一個包含屬性名稱的字符串
例子：
// 在為屬性設置新值前檢測該屬性是否存在 var d = document.getElementById("div1");if (d.hasAttribute("align")) {d.setAttribute("align", "center"); }getAttribute
getAttribute() 返回元素上一個指定的屬性值。如果指定的屬性不存在，則返回 null 或 “” （空字符串）
- 注意：getAttribute 通常用于替換getAttributeNode方法，來獲得元素的屬性值。性能也更快. 性能對比是 element.id 大于 element.getAttribute('id') 大于element.getAttributeNode('id').nodeValue。
語法：
// attribute 是一個包含 attributeName 屬性值的字符串。 var attribute = element.getAttribute(attributeName);- 參數(shù)
- attributeName: 是你想要獲取的屬性值的屬性名稱。
例子：
var div1 = document.getElementById("div1"); var align = div1.getAttribute("align");alert(align); // 顯示id="div1元素的align值setAttribute
setAttribute() 設置指定元素上的某個屬性值。如果屬性已經(jīng)存在，則更新該值；否則，使用指定的名稱和值添加一個新的屬性。
語法：
element.setAttribute(name, value);- 參數(shù)
- name：表示屬性名稱的字符串。
- value：屬性的值/新值。任何非字符串的值都會被自動轉(zhuǎn)換為字符串.
注意：
寫化。如果指定的屬性已經(jīng)存在，則其值變?yōu)閭鬟f的值。如果不存在，則創(chuàng)建指定的屬性。
例子：
<button>Hello World</button><script> var b = document.querySelector("button");b.setAttribute("name", "helloButton"); // 通過將Disabled屬性的值設置為空字符串（“”），將disable設置為true，這將導致按鈕被禁用。 b.setAttribute("disabled", ""); </script>由于布爾屬性只要出現(xiàn)在元素上就會被認為是 true 或者 setAttribute會將指定的值轉(zhuǎn)換為字符串，因此指定null不一定能達到我們的期望。 導致無法刪除屬性或?qū)⑵渲翟O置為null，而是將屬性的值設置為字符串“null”。 如果要刪除屬性需要收益removeAttribute()方法。
「課堂練習」
**
通過相關(guān)屬性節(jié)點操作完成以下功能
**
要求：
- 將頁面中到 id 是 purchase 的元素的 title 屬性值設置為 a list of goods
- 將class 是 goods 元素，并且擁有title屬性的元素將其 title 值設置為 a gentle reminder。
部分代碼：
<p id="purchase">購物列表</p><ul><li class="goods" title="可購買">洗衣機</li><li class="goods" title="可購買">電腦</li><li class="goods" title="可購買">手機</li><li class="goods" title="可購買">空調(diào)</li><li class="goods">宇宙空間站</li><li class="goods" title="可購買">汽車</li><li class="goods">火箭</li></ul> <script>document.querySelector("#purchase").setAttribute("title","a list of goods");var lis=document.querySelectorAll("ul>li");lis.forEach(function(l,index){//判斷l(xiāng)i元素要有class并且class屬性的值為goods并且還要有title屬性if(l.hasAttribute("class") && l.getAttribute("class")=="goods" && l.hasAttribute("title")){l.setAttribute("title","a gentle reminder")} });</script>removeAttribute
removeAttribute() 從指定的元素中刪除一個屬性。
語法：
element.removeAttribute(attrName);- 參數(shù)
- attrName：指定要從元素中移除的屬性的名稱。如果指定的屬性不存在，則不生效但不會生成錯誤。
例子：
// Given: <div id="div1" align="left" width="200px"> document.getElementById("div1").removeAttribute("align"); // Now: <div id="div1" width="200px">總結(jié)
以上是生活随笔為你收集整理的13.节点操作上，下的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于Fragstats的土地利用景观格局
- 下一篇： 集成海康威视Sadp SDK实现修改设备