Dom基本操作

帶着例子學Dom 幾行代碼就搞定！

DOM查找

document代表整個文檔

按id屬性，精確查找一個元素對象
document.getElementById() //（唯一標識）元素id 在Ie8以下的瀏覽器，不區分id大小寫，而且也返回匹配name屬性的元素

按標籤名查找返回一個動態集合
document.getElementsByTagName() // 標籤名

通過name屬性查找返回一個動態集合
document.getElementByName(); //，需注意，只有部分標籤name可生效（表單，表單元素，img，iframe）

通過class查找返回一個動態集合
document.getElementsByClassName() // 類名 -> ie8和ie8以下的ie版本中沒有，可以多個class一起

通過CSS選擇器查找返回一個動態集合
document.querySelector() // css選擇器在ie7和ie7以下的版本中沒有（缺點不能實時更新）

通過CSS選擇器查找返回一個動態集合
document.querySelectorAll() // css選擇器在ie7和ie7以下的版本中沒有（缺點不能實時更新）

節點的類型 nodeType

元素節點 —— 1
屬性節點 —— 2
文本節點 —— 3
註釋節點 —— 8
document —— 9
DocumentFragment —— 11
獲取節點類型 nodeType

（更正：圖示屬性節點更正爲元素節點 nodeType 值爲 1）

遍歷節點樹

parentNode -> 父節點 (最頂端的parentNode爲#document);

childNodes -> 子節點們

firstChild -> 第一個子節點

lastChild -> 最後一個子節點

nextSibling->後一個兄弟元素

previousSibling->前一個兄弟元素

加深理解 習題1——編輯函數，封裝children功能，解決以前部分瀏覽器的兼容性問題

//獲取div元素 獲取span元素
var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
//在原型鏈上定義myChildren函數
Element.prototype.myChildren = function(){
//將當前元素節點的直接子節點賦值給child
      var child = this.childNodes;
      //獲取直接子節點的個數
      var len = child.length;
      //定義空數組
      var arr = [];
      //遍歷子節點
      for(var i = 0;i < len;i++){
      //若子節點nodeType值爲 1 即爲元素節點
      		if(child[i].nodeType == 1){
      		//將該元素節點放在arr數組內
             		arr.push(child[i]);
               }
      }
      //返回 當前元素節點的所有直接子元素節點
        return arr;
 }

基於元素節點樹的遍歷

parentElement -> 返回當前元素的父元素節點 (IE9及以下不兼容)

children -> 只返回當前元素的元素子節點

node.childElementCount === node.children.length當前元素節點的子元素節點個數(IE9及以下不兼容)

firstElementChild -> 返回的是第一個元素節點(IE9及以下不兼容)

lastElementChild -> 返回的是最後一個元素節點(IE9及以下不兼容)

nextElementSibling / previousElementSibling ->返回後一個/前一個兄弟元素節點（IE9及以下不兼容)

節點的四個屬性

nodeName 元素的標籤名，以大寫形式表示,只讀

nodeValue Text節點或Comment節點的文本內容,可讀寫

nodeType 該節點的類型，只讀

attributes Element 節點的屬性集合

Node.hasChildNodes判斷是否包含指定屬性

document.getElementById('bt1').hasAttribute('onclick');

DOM繼承樹

（document --> HTMLDocument.protptype --> Document.prototype）

DOM樹加深理解

<script>
	HTMLBodyElement.prototype.abc='demo';
    var body = document.getElementsByTagName('body')[0];
    var head = document.getElementsByTagName('head')[0];
    //根據繼承樹 head 不屬於HTMLBodyElement
</script>

<script>
	HTMLElement.prototype.abc='demo';
    var body = document.getElementsByTagName('body')[0];
    var head = document.getElementsByTagName('head')[0];
    //根據繼承樹 head body 屬於HTMLElement
</script>

1.getElementById方法定義在Document.prototype上，即Element節點上不能使用。

2.getElementsByName方法定義在HTMLDocument.prototype上，即非html中的document以外不能使用(如xml document,Element)

3.getElementsByTagName方法定義在Document.prototype 和 Element.prototype上

<script>
        var div = document.getElementsByTagName('div')[0];
        //div 下面的 span 元素 
        var span = div.getElementsByTagName('span')[0];
</script>

4.HTMLDocument.prototype定義了一些常用的屬性，body,head,分別指代HTML文檔中的標籤。

5.Document.prototype上定義了documentElement屬性，指代文檔的根元素，在HTML文檔中，他總是指代元素(document.documentElement --> html)

6.getElementsByClassName、querySelectorAll、querySelector在Document,Element類中均有定義

加深理解 習題2——封裝函數，返回元素e的第n層祖先元素

<body>
<div>
        <p></p>
        <span>
            <strong></strong>
            <i></i>
        </span>
    </div>
 <script>
        function retParent(elem,n){
            while(elem && n){
                elem = elem.parentElement;
                n--;
            }
            return elem;
        }
        var i = document.getElementsByTagName('i')[0];
</script>
</body>

加深理解 習題3——編輯函數，封裝children功能，解決以前部分瀏覽器的兼容性問題

<body>
    <div>
        <p></p>
        <span>
            <strong></strong>
            <i></i>
        </span>
    </div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        Element.prototype.myChildren = function(){
            var child = this.childNodes;
            var len = child.length;
            var arr = [];
            for(var i = 0;i < len;i++){
            //nodeType == 1爲元素節點
                if(child[i].nodeType == 1){
                    arr.push(child[i]);
                }
            }
            return arr;
        }
    </script>
</body>

DOM修改

修改屬性

1.Element節點的一些屬性
innerHTML
innerText(火狐不兼容) / textContent(老版本IE不好使)

2. Element節點的一些方法
ele.setAttribute()//設置屬性值
ele.getAttribute();//獲取屬性值
ele.removeAttribute();//移除屬性

//設置div class屬性 屬性值爲content
var div = document.getElementsByTagName(“div")[0]; 
div.setAttributeNode(“class”，"content");
//獲取div標籤 class的屬性值
div.getAttributeNode(“class”);
//刪除div標籤 class 屬性
div.removeAttribute('class');

加深理解 爲所有元素加上class屬性，屬性名爲對應標籤名

var all = document.getElementsByTagName('*');
for(var i = 0;i < all.length;i++){
    all[i].setAttribute('this-name',all[i].nodeName);
}

加深理解 習題4——請編寫一段JavaScript腳本生成下面這段DOM結構。要求：使用標準的DOM方法或屬性。提示 dom.className 可以讀寫class。

 <div class="example">
    <p class="slogan">alalasheep@163.com</p>
 </div>

代碼實現

         //創建 div 元素節點
         var div = document.createElement('div');
         //創建 p 元素節點
         var p = document.createElement('p');
         //創建 文本節點
         var text = document.createTextNode('[email protected]');
         //爲新創建的div標籤設置屬性名爲class 值爲 example
         div.setAttribute('class','example');
         //爲新創建的p標籤設置屬性名爲class 值爲 slogan
         p.setAttribute('class','slogan');
         //將 p 標籤添加到 div標籤內
         div.appendChild(p);
         //將文本節點 添加到p標籤內
         p.appendChild(text);
         //將整個 div 掛在 Dom樹上
         document.body.appendChild(div);

修改樣式

內聯樣式: elem.style.屬性名
強調: 屬性名: 去橫線，變駝峯
比如:
css: background-color => backgroundColor
list-style-type => listStyleType

var span = document.getElementsByTagName("span")[0];
var div = document.getElementsByTagName("div")[0];
//修改單個樣式
span.style.color = "red";
//駝峯式命名
span.style.backgroundColor = "#096";
//修改樣式集合
div.style.cssText="width:200px;height:200px;background-color:red;";

DOM添加

創建空元素
document.createElement();//創建元素節點
document.createTextNode();//創建文本節點
document.createComment();//創建註釋節點
document.createDocumentFragment();//創建文檔碎片
添加元素的步驟

設置關鍵屬性

a.innerHTML="go to tmooc" 
a.herf="http://tmooc.cn";

<a href="http://tmooc.cn">go to tmooc</a>

設置關鍵樣式

a.style.opacity = "1";
a.style.cssText = "width: 100px;height: 100px";

將元素添加到將元素添加到DOM樹
PARENTNODE.appendChild();//添加子節點

var div = document.createElement( 'div' );
var txt = document.createTextNode('alalasheep');
div.appendChild(txt); 
//標籤元素 最終要掛在body上
document.body.appendChild(div);

PARENTNODE.insertBefore(a, b)；//在a節點前添加b節點

var ul = document.getElementById('menu'); 
var newLi = document.createElement('li');
//在父元素中的最後一個子節點之前添加一個新的子節點
ul.insertBefore(newLi, ul.lastChild);

加深理解 習題5——封裝函數insertAfter();功能類似insertBefore()；

//在原型鏈上封裝 將 targetNode 插在 afterNode 之後
 Element.prototype.insertAfter = function(targetNode,afterNode){
 			//將afterNode的下一個兄弟節點賦值給beforeNode
            var beforeNode = afterNode.nextElementSibling;
            //如果afterNode沒有下一個兄弟節點就在當前節點下面添加子節點targetNode
            if(beforeNode == null){
                this.appendChild(targetNode);
            }
            //否則在在下一個兄弟節點之前插入targetNode
            else{
                this.insertBefore(targetNode,beforeNode);
            }
        }
        var div = document.getElementsByTagName('div')[0];
        var p = document.getElementsByTagName('p')[0];
        var span = document.createElement('span');
        var text = document.createTextNode('lalasheep');
        span.appendChild(text);
        div.insertAfter(span,p);

刪除子節點
parent.removeChild();//刪除子節點

 var div = document.getElementsByTagName('div')[0];
 var span = document.getElementsByTagName('span')[0];
  //刪除div標籤下的span標籤
 div.removeChild(span);

替換節點（不常用）
parent.replaceChild(new, origin);

添加元素優化

文檔片段: 內存中，臨時保存多個平級子元素的虛擬父元素用法和普通父元素完全一樣
如何:
1.創建片段

var frag=document.createDocumentFragment();

2.將子元素臨時追加到frag中

 frag.appendChild(child);

3.將frag追加到頁面

parent.appendChild(frag);

強調: append之後，frag自動釋放，不會佔用元素

熬夜用心總結，有用記得點贊+收藏+評論

[ JavaScript ] 敲完這幾行代碼，DOM基本操作也就學會了！

Dom基本操作

DOM查找

節點的類型 nodeType

遍歷節點樹

基於元素節點樹的遍歷

節點的四個屬性

DOM繼承樹

DOM修改

修改屬性

修改樣式

DOM添加

添加元素優化

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

安裝chromadb注意事項

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

圖文詳解新的input類型和屬性

Python數值運算操作符

[ Python ] 原來集合、元組、列表、字典類型及操作這麼簡單，看完簡直秒懂！

[ JavaScript ] 敲完這幾行代碼，DOM基本操作也就學會了！

【 JavaScript 】異步加載時間線一覽

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結