知識總結：
<pre>
1.document獲取元素對象：
直接方式：
第一種：通過元素id
document.getElementById("id名");
第二種：通過name屬性
document.getElementsByName("name名");返回數組NodeList
第三種：通過標簽名
document.getElementsByTagName("標簽名");返回數組 HTMLCollection
</br>
間接方式：
父子關系：獲取父元素，根據屬性childeNodes獲取所有的子元素
子父關系：獲取子元素，根據屬性parentNode獲取父元素
兄弟關系：先獲取元素，使用屬性previousSibling、nextSibling獲取元素
</br>
在js中獲取到的html元素是轉化后的對象，使用對象存儲方便。
間接方式中，獲取子元素和獲取兄弟元素需要注意某些瀏覽器會將空行作為對象元素的問題。
</br>
2.document操作元素屬性：（先要獲取元素對象）：
獲取元素屬性值：
固有屬性：元素對象名.屬性名
自定義屬性：元素對象名.getAttribute("屬性名");
</br>
注意：固有屬性方式不能獲取自定義屬性
自定義屬性方式可以獲取固有屬性值，但對于value屬性獲取的是默認值
修改元素屬性值：
修改固有屬性：對象名.屬性名="屬性名"，注意name屬性和id屬性的值不要輕易更改
修改自定義屬性值：對象名.setAttribute("屬性名","屬性值");
</br>
3.document操作元素內容：
innerHTML：
獲取元素內容：獲取全部內容包括HTML標簽
修改元素內容：原有值被覆蓋，HTML標簽會被解析
</br>
innerText:
獲取元素內容：獲取的是元素中的文本內容，不包括HTML標簽
修改元素內容：原有內容會被覆蓋，但是HTML標簽不會被解析
</br>
4.document操作元素樣式：
使用style屬性：
增加元素樣式：對象名.style.樣式名="樣式值"；//樣式名如果存在"-"，把"-"刪除改成駝峰
刪除元素樣式：對象名.style.樣式名="";
</br>
使用className：
增加樣式：對象名.className="類選擇器名"
刪除樣式：對象名.className="";
</pre>
代碼示例：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getBy(){
var myid=document.getElementById("mytext");
var myname=document.getElementsByName("btn");
var mytag=document.getElementsByTagName("input");
alert("getElementById返回值："+myid);
alert("getElementsByName返回數組類型："+myname);
alert("getElementsByTagName返回數組類型："+mytag);
}
function getParent(){
var son=document.getElementById("son");
var parent=son.parentNode;
alert(parent);
}
function getSib(){
var son2=document.getElementById("son2");
var nextsib=son2.nextSibling.nextSibling;
var presib=son2.previousSibling.previousSibling;
alert(presib.value+"————"+nextsib.value);
}
function myAttr(){
var thetxt=document.getElementById("txt");
var myspan=document.getElementById("myspan");
thetxt.setAttribute("abc","這是自定義屬性值");
myspan.innerHTML="輸入框的id："+thetxt.id+"</br>輸入框的name："+thetxt.name+"</br>輸入框の自定義屬性："+thetxt.getAttribute("abc");
}
function innert(){
var mydiv02=document.getElementById("div02");
alert(mydiv02.innerText);
mydiv02.innerText="<input type='text' name='txt' id='txt' value='this is txt.' abc='123' />萌萌噠";
}
function innerh(){
var mydiv02=document.getElementById("div02");
alert(mydiv02.innerHTML);
mydiv02.innerHTML="<input type='text' name='txt' id='txt' value='this is txt.' abc='123' />萌萌噠";
}
</script>
<style type="text/css">
.mydiv{
width: 200px;
height: 200px;
border: 1px solid;
background-color: aliceblue;
}
</style>
</head>
<body onload="getBy();myAttr();">
<div id="">
<input type="text" name="mytext" id="mytext" value="text" />
<input type="button" name="btn" id="btn1" value="button" />
<input type="button" name="btn" id="btn2" value="button" />
</div>
<hr />
<div class="mydiv" name="mydiv">
<input type="button" name="son" id="son" value="獲取父元素" onclick="getParent()" />
<input type="button" name="" id="son2" value="獲取兄弟元素" onclick="getSib();"/>
<input type="text" name="" id="" value="兄弟" />
</div>
<hr />
<div id="div02">
<input type="text" name="txt" id="txt" value="this is txt." abc="123" />
<br />
呵呵噠
<br />
<span id="myspan">
</span>
</div>
<div id="">
<input type="button" name="" id="" value="測試innerText" onclick="innert();"/>
<input type="button" name="" id="" value="測試innerText" onclick="innerh();"/>
</div>
</body>
</html>
