1.案例一：在末尾添加節(jié)點(diǎn)
第一步：獲取到 ul 標(biāo)簽
第二步：創(chuàng)建 li 標(biāo)簽
document.createElement（“標(biāo)簽名稱(chēng)”）;方法第三步：創(chuàng)建文本
document.createTextNode（“文本內(nèi)容”）；第四步：把文本添加到 li 下面
使用 appendChild 方法第五步：給 li 添加 ul 末尾
使用 appendChild 方法
代碼實(shí)現(xiàn)：
<body>
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<br />
<input type="button" value="add" onclick="add1()"/>
<script type="text/javascript">
//在末尾添加
function add1(){
//獲取到ul標(biāo)簽
var ul1 = document.getElementById("ulid");
//創(chuàng)建標(biāo)簽
var li1 = document.createElement("li");
//創(chuàng)建文本
var text1 = document.createTextNode("555");
li1.appendChild(text1);
ul1.appendChild(li1);
}
</script>
</body>
2.元素對(duì)象（element 對(duì)象）
要操作 element 對(duì)象颂斜，首先必須要獲取到 element
——使用 document 里面相應(yīng)的方法獲取
方法：
獲取屬性里面的值
getAttribute（“屬性名稱(chēng)”）;
代碼實(shí)現(xiàn)：
<input type="text" name="name1" id="inputid" value="aaa"/>
//先要獲取input標(biāo)簽
var input1=document.getElementById（“inputid”）崇决；
alert（input1.value）; //彈出 aaa
alert（input1.getAttribute（“value”））军俊； //彈出 aaa
設(shè)置屬性的值
input1.setAttribute（“class”搂鲫，“haha”）迷郑；
刪除屬性值
input1.removeAttribute（“name”）炭剪；
不能刪除 value 值
3.想要獲取標(biāo)簽下面的子標(biāo)簽
使用屬性 childNodes,但是這個(gè)屬性兼容性很差
獲得標(biāo)簽下面子標(biāo)簽的唯一有效方法辉阶，使用 getElementByTagName ()`方法'
<body>
<ul id="ulid1">
<li>aaaa</li>
<li>bbb</li>
<li>cccc</li>
</ul>
<script type="text/javascript">
//獲取到ul下面的所有子標(biāo)簽（子元素）
//獲取ul標(biāo)簽
var ul11 = document.getElementById("ulid1");
//獲取ul下面的子標(biāo)簽
//var lis = ul11.childNodes;//不兼容
var lis =ul11.getElementsByTagName("li");//兼容
alert(lis.length);
</script>
</body>
3.Node 對(duì)象屬性一
NodeName
nodeType``nodeValue`
使用 dom 解析 html 時(shí)先壕，需要 html 里面的標(biāo)簽，屬性和文本都封裝成對(duì)象
標(biāo)簽節(jié)點(diǎn)對(duì)應(yīng)的值
<body>
<span id ="spanid">哈哈</span>
<script type="text/javascript">
//獲取標(biāo)簽對(duì)象
var span1 = document.getElementById("spanid");
alert(span1.nodeType);//1
alert(span1.nodeName);//SPAN
alert(span1.nodeValue);//空
//屬性
var id1 = span1.getAttributeNode("id");
alert(id1.nodeType);//2
alert(id1.nodeName);//id
alert(id1.nodeValue);//spanid
//文本
var text1 = span1.firstChild;
alert(text1.nodeType);//3
alert(text1.nodeName);//#TEXT
alert(text1.nodeValue);//哈哈
</script>
</body>
nodeType：1
NodeName：大寫(xiě)標(biāo)簽名稱(chēng) 比如 SPAN
nodeValue：null
屬性節(jié)點(diǎn)對(duì)應(yīng)的值
nodeType：2
NodeName：屬性名稱(chēng)
nodeValue：屬性的值
文本節(jié)點(diǎn)對(duì)應(yīng)的值
nodeType：3
NodeName：#text
nodeValue：文本內(nèi)容
5.Node 對(duì)象的屬性二
<ul id="ulid">
<li id="li1">qqq</li>
<li id="li2">www</li>
<li id="li3">www</li>
<li id="li4">www</li>
</ul>
父節(jié)點(diǎn)
ul 是 li 的父節(jié)點(diǎn)
parentNode
var li1=document.getElementById("li1");
var ul1=li1.parentNode;
alert（ul1.id）;//ulid
子節(jié)點(diǎn)
li 是 ul 的子節(jié)點(diǎn)
childNodes：得到所有子節(jié)點(diǎn)睛藻，但是兼容性很差
firstchild：獲取第一個(gè)子節(jié)點(diǎn)
var ul1=document.getElementById（“ulid”）启上；
var li1=ul1.firstchild;
alert（li1.id）;//li1
lastchild：獲取最后一個(gè)子節(jié)點(diǎn)
var ul1=document.getElementById（“ulid”）；
var li4=ul1.lastchild;
alert（li4.id）;//li4
同輩節(jié)點(diǎn)
li 直接關(guān)系是同輩節(jié)點(diǎn)
nextSibing：返回一個(gè)給定節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)
previousSibling：返回一個(gè)給定節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)
