04-doucument對象屬性和方法

由節點組成
1、元素節點: html body div button
2、文本節點：展示的內容<div>...</div>
3、屬性節點：<input type="text" />

//document.activeElement 返回當前獲取焦點元素 //document.addEventListener() 向文檔添加句柄 //document.createElement() 創建元素節點 //createTextNode() 創建文本節點。 //節點對象屬性和方法： //appendChild() 可向節點的子節點列表的末尾添加新的子節點 //擴展 需求：二個列表，單擊按鈕時，左邊最后一個數據移動到右邊 //lastChild 返回最后一個子節點 //firstChild 返回第一個子節點 //childNodes 返回所有子節點 //nodeType 節點類型 元素節點的屬性是返回1 文本節點的屬性是返回3

html文件：

<div id="my"><div id="test">hello world</div><input type="text" value="輸入信息" /><button class="btn">按鈕</button><div><ul class="listL"><li>red</li><li>orange</li></ul><ul class="listR"><li>apple</li><li>banana</li></ul><button class="change">左邊列表最后一個移入右邊</button></div><div><ul class="listL2"><li>red</li><li>orange</li></ul><ul class="listR2"><li>apple</li><li>banana</li></ul></div> </div>

js文件：

//返回當前獲取焦點元素的id alert(document.activeElement.id); //my document.getElementById("my").onclick=function(){var _name = document.activeElement.tagName; //是body } //document.addEventListener() 向文檔添加句柄 document.getElementById("my").addEventListener('click',function(){var _name = document.activeElement.tagName;document.getElementById("test").innerHTML = _name; });//document.createElement() 創建元素節點。 //動態的操作DOM，添加內容 <div>hello world</div> document.querySelector(".btn").onclick=function(){var _div = document.createElement("div");//元素節點var _text = document.createTextNode("hello world"); //創建文本節點。_div.appendChild(_text); //把文本節點添 加到元素節點末尾document.body.appendChild(_div); }//lastChild 返回最后一個子節點 //firstChild 返回第一個子節點 //擴展二 需求：二個列表，左側選 中的數據移入到右側var _listL = document.querySelector(".listL");var child = _listL.childNodes; //獲取所有子節點 ['red','orange']console.log(child.length); //2for(var i=0;i<child.length;i++){child[i].onclick = function(){ //arr[0]document.querySelector(".listR").appendChild(this); //this表示當前單擊的對象}};//可能會出現的問題 有空格也算節點 //nodeType 節點類型 元素節點的屬性是返回1 文本節點的屬性是返回3

總結

以上是生活随笔為你收集整理的04-doucument对象属性和方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。