04-doucument對(duì)象屬性和方法

由節(jié)點(diǎn)組成
1、元素節(jié)點(diǎn): html body div button
2、文本節(jié)點(diǎn)：展示的內(nèi)容<div>...</div>
3、屬性節(jié)點(diǎn)：<input type="text" />

//document.activeElement 返回當(dāng)前獲取焦點(diǎn)元素 //document.addEventListener() 向文檔添加句柄 //document.createElement() 創(chuàng)建元素節(jié)點(diǎn) //createTextNode() 創(chuàng)建文本節(jié)點(diǎn)。 //節(jié)點(diǎn)對(duì)象屬性和方法： //appendChild() 可向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn) //擴(kuò)展 需求：二個(gè)列表，單擊按鈕時(shí)，左邊最后一個(gè)數(shù)據(jù)移動(dòng)到右邊 //lastChild 返回最后一個(gè)子節(jié)點(diǎn) //firstChild 返回第一個(gè)子節(jié)點(diǎn) //childNodes 返回所有子節(jié)點(diǎn) //nodeType 節(jié)點(diǎn)類型 元素節(jié)點(diǎn)的屬性是返回1 文本節(jié)點(diǎn)的屬性是返回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">左邊列表最后一個(gè)移入右邊</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文件：

//返回當(dāng)前獲取焦點(diǎn)元素的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() 創(chuàng)建元素節(jié)點(diǎn)。 //動(dòng)態(tài)的操作DOM，添加內(nèi)容 <div>hello world</div> document.querySelector(".btn").onclick=function(){var _div = document.createElement("div");//元素節(jié)點(diǎn)var _text = document.createTextNode("hello world"); //創(chuàng)建文本節(jié)點(diǎn)。_div.appendChild(_text); //把文本節(jié)點(diǎn)添 加到元素節(jié)點(diǎn)末尾document.body.appendChild(_div); }//lastChild 返回最后一個(gè)子節(jié)點(diǎn) //firstChild 返回第一個(gè)子節(jié)點(diǎn) //擴(kuò)展二 需求：二個(gè)列表，左側(cè)選 中的數(shù)據(jù)移入到右側(cè)var _listL = document.querySelector(".listL");var child = _listL.childNodes; //獲取所有子節(jié)點(diǎn) ['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表示當(dāng)前單擊的對(duì)象}};//可能會(huì)出現(xiàn)的問題 有空格也算節(jié)點(diǎn) //nodeType 節(jié)點(diǎn)類型 元素節(jié)點(diǎn)的屬性是返回1 文本節(jié)點(diǎn)的屬性是返回3

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。