javascript獲取Document型別和Element型別屬性
阿新 • • 發佈：2019-02-07
DOM
節點層次：
Document型別
JavaScript 通過 Document 型別表示文件。在瀏覽器中， document 物件是 HTMLDocument（繼承自 Document 型別）的一個例項，表示整個 HTML 頁面。而且， document 物件是 window 物件的一個屬性，因此可以將其作為全域性物件來訪問。
1、文件子節點
可以使用document.documentElement屬性，該屬性始終指向HTML頁面中<html>元素。另一個就是通過 childNodes 列表訪問文件元素，但通過 documentElement 屬性則能更快捷、更直接地訪問該元素
兩種方法：
document.documentElement;
document.childNodes[0];
document.firstChild;
輸出結果是獲取所有頁面所有元素
<html>
<head>
</head>
<body>
<form>
ssss
</form>
</body>
</html>
document還有一個body屬性可以直接指向html中<body>元素
var body = document.body;//取得對<body>的引用
所有瀏覽器都是支援document.documentElement;和document.body;這兩個屬性的。
2、文件資訊
document.title;獲取文件標題資訊，可以修改這個標題資訊：document.title = "這是一個測試";
document.URL;//取得完整的 URL
document.domain;//取得域名
document.referrer;//取得來源頁面的 URL
3、查詢元素
document.getElementById("");接收一個引數：要取得的元素的 ID。如果找到相應的元素則返回該元素，如果不存在帶有相應 ID 的元素，則返回 null。
document.getElementsByTagName("");這個方法接受一個引數，即要取得元素的標籤名，而返回的是包含零或多個元素的 NodeList。
document.getElementsByName("");這個方法會返回帶有給定 name 特性的所有元素。最常使用 getElementsByName()法的情況是取得單選按鈕；為了確保傳送給瀏覽器的值正確無誤，所有單選按鈕必須具有相同的 name 特性，
<html>
<head>
</head>
<script type="text/javascript">
function check(){
var color = document.getElementsByName("color");
for(var i = 0 ; i < color.length;i++){
if(color[i].checked){
console.log(color[i].value);
}
}
}
</script>
<body>
<form>
<fieldset>
<legend>Which color do you prefer?</legend>
<ul>
<li><input type="radio" value="red" name="color" id="colorRed" onclick="check();">
<label for="colorRed">Red</label></li>
<li><input type="radio" value="green" name="color" id="colorGreen" onclick="check();">
<label for="colorGreen">Green</label></li>
<li><input type="radio" value="blue" name="color" id="colorBlue" onclick="check();">
<label for="colorBlue">Blue</label></li>
</ul>
</fieldset>
</form>
</body>
</html>
4、特殊集合
除了屬性和方法， document 物件還有一些特殊的集合。這些集合都是 HTMLCollection 物件，為訪問文件常用的部分提供了快捷方式，包括：
document.anchors，包含文件中所有帶 name 特性的<a>元素；
document.applets，包含文件中所有的<applet>元素，因為不再推薦使用<applet>元素，所以這個集合已經不建議使用了；
document.forms，包含文件中所有的<form>元素，與 document.getElementsByTagName("form")得到的結果相同；
document.images，包含文件中所有的<img>元素，與 document.getElementsByTagName("img")得到的結果相同；
document.links，包含文件中所有帶 href 特性的<a>元素
5、文件寫入
document將輸出流寫入到網頁中。
write(),writeln(),open()和close();
write()和writeln()方法都接收一個字串引數，即要寫入到輸出流中的文字。write()會原樣寫入，而writeln()則會在字元
串的末尾新增一個換行符(\n)。在頁面被載入的過程中，可以使用這個兩個方法向頁面中動態地加入內容。
例項：
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<p>The current date and time is:
<script type="application/javascript">
document.write("<strong>"+(new Date()).toString()+"</strong>")
</script>
</p>
</form>
</body>
</html>
Element型別
Element 型別是使用 attributes 屬性的唯一一個 DOM 節點型別。attributes 屬性中包含一個NamedNodeMap，與 NodeList 類似，也是一個“動態”的集合。元素的每一個特性都由一個 Attr 節點表示，每個節點都儲存在 NamedNodeMap 物件中。
getNamedItem(name)：返回 nodeName 屬性等於 name 的節點；
removeNamedItem(name)：從列表中移除 nodeName 屬性等於 name 的節點；
setNamedItem(node)：向列表中新增節點，以節點的 nodeName 屬性為索引；
item(pos)：返回位於數字 pos 位置處的節點。
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<div id="myDiv" align="left" my_special_attribute="hello!"></div>
</form>
</body>
</html>
//獲取div 元素
var div = document.getElementById("myDiv")
1、取得特性
div.getAttribute("id");
div.getAttribute("align");
div.getAttribute("my_special_attribute");
2、設定特性
div.setAttribute("id","test");
div.setAttribute("align","test");
div.setAttribute("my_special_attribute","test");
3、移除特性
div.removeAttribute("id");
4、attributes 屬性
div.attributes.id.value;//myDiv
div.attributes.getNamedItem("id").nodeValue;//myDiv
div.attributes["id"].nodeValue;//myDiv
5、設定新的值
element.attributes["id"].nodeValue = "someOtherId";
6、刪除特性
element.attributes.removeNamedItem("id");
7、建立元素
使用document.createElement()方法可以建立新元素
var userName = document.createElement("input");
新增屬性
userName.setAttribute("id","userName");
userName.setAttribute("name","userName");
userName.setAttribute("value","liuwenlaing");
userName:<input id="userName" name="userName" value="liuwenlaing">
通過appendChild()、 insertBefore()或 replaceChild()把新元素新增到文件樹中。
var div = document.getElementById("myDiv");
div.appendChild(userName);
div:
//<div id="myDiv" align="left" my_special_attribute="hello!"><input id="userName" name="userName" value="liuwenlaing"></div>
直接建立元素資訊：
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");
8、元素的子節點
<html>
<head>
</head>
<body>
<form>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</form>
</body>
</html>
for(var i = 0 ; i < items.length;i++){
console.log(items[i]);
}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
這裡<ul>的後代中只包含直接子元素。不過，如果它包含更多層次的後代元素，那麼各個層次中包含的<li>元素也都會返回。
節點層次：
Document型別
JavaScript 通過 Document 型別表示文件。在瀏覽器中， document 物件是 HTMLDocument（繼承自 Document 型別）的一個例項，表示整個 HTML 頁面。而且， document 物件是 window 物件的一個屬性，因此可以將其作為全域性物件來訪問。
1、文件子節點
可以使用document.documentElement屬性，該屬性始終指向HTML頁面中<html>元素。另一個就是通過 childNodes 列表訪問文件元素，但通過 documentElement 屬性則能更快捷、更直接地訪問該元素
兩種方法：
document.documentElement;
document.childNodes[0];
document.firstChild;
輸出結果是獲取所有頁面所有元素
<html>
<head>
</head>
<body>
<form>
ssss
</form>
</body>
</html>
document還有一個body屬性可以直接指向html中<body>元素
var body = document.body;//取得對<body>的引用
所有瀏覽器都是支援document.documentElement;和document.body;這兩個屬性的。
2、文件資訊
document.title;獲取文件標題資訊，可以修改這個標題資訊：document.title = "這是一個測試";
document.URL;//取得完整的 URL
document.domain;//取得域名
document.referrer;//取得來源頁面的 URL
3、查詢元素
document.getElementById("");接收一個引數：要取得的元素的 ID。如果找到相應的元素則返回該元素，如果不存在帶有相應 ID 的元素，則返回 null。
document.getElementsByTagName("");這個方法接受一個引數，即要取得元素的標籤名，而返回的是包含零或多個元素的 NodeList。
document.getElementsByName("");這個方法會返回帶有給定 name 特性的所有元素。最常使用 getElementsByName()法的情況是取得單選按鈕；為了確保傳送給瀏覽器的值正確無誤，所有單選按鈕必須具有相同的 name 特性，
<html>
<head>
</head>
<script type="text/javascript">
function check(){
var color = document.getElementsByName("color");
for(var i = 0 ; i < color.length;i++){
if(color[i].checked){
console.log(color[i].value);
}
}
}
</script>
<body>
<form>
<fieldset>
<legend>Which color do you prefer?</legend>
<ul>
<li><input type="radio" value="red" name="color" id="colorRed" onclick="check();">
<label for="colorRed">Red</label></li>
<li><input type="radio" value="green" name="color" id="colorGreen" onclick="check();">
<label for="colorGreen">Green</label></li>
<li><input type="radio" value="blue" name="color" id="colorBlue" onclick="check();">
<label for="colorBlue">Blue</label></li>
</ul>
</fieldset>
</form>
</body>
</html>
4、特殊集合
除了屬性和方法， document 物件還有一些特殊的集合。這些集合都是 HTMLCollection 物件，為訪問文件常用的部分提供了快捷方式，包括：
document.anchors，包含文件中所有帶 name 特性的<a>元素；
document.applets，包含文件中所有的<applet>元素，因為不再推薦使用<applet>元素，所以這個集合已經不建議使用了；
document.forms，包含文件中所有的<form>元素，與 document.getElementsByTagName("form")得到的結果相同；
document.images，包含文件中所有的<img>元素，與 document.getElementsByTagName("img")得到的結果相同；
document.links，包含文件中所有帶 href 特性的<a>元素
5、文件寫入
document將輸出流寫入到網頁中。
write(),writeln(),open()和close();
write()和writeln()方法都接收一個字串引數，即要寫入到輸出流中的文字。write()會原樣寫入，而writeln()則會在字元
串的末尾新增一個換行符(\n)。在頁面被載入的過程中，可以使用這個兩個方法向頁面中動態地加入內容。
例項：
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<p>The current date and time is:
<script type="application/javascript">
document.write("<strong>"+(new Date()).toString()+"</strong>")
</script>
</p>
</form>
</body>
</html>
Element型別
Element 型別是使用 attributes 屬性的唯一一個 DOM 節點型別。attributes 屬性中包含一個NamedNodeMap，與 NodeList 類似，也是一個“動態”的集合。元素的每一個特性都由一個 Attr 節點表示，每個節點都儲存在 NamedNodeMap 物件中。
getNamedItem(name)：返回 nodeName 屬性等於 name 的節點；
removeNamedItem(name)：從列表中移除 nodeName 屬性等於 name 的節點；
setNamedItem(node)：向列表中新增節點，以節點的 nodeName 屬性為索引；
item(pos)：返回位於數字 pos 位置處的節點。
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<div id="myDiv" align="left" my_special_attribute="hello!"></div>
</form>
</body>
</html>
//獲取div 元素
var div = document.getElementById("myDiv")
1、取得特性
div.getAttribute("id");
div.getAttribute("align");
div.getAttribute("my_special_attribute");
2、設定特性
div.setAttribute("id","test");
div.setAttribute("align","test");
div.setAttribute("my_special_attribute","test");
3、移除特性
div.removeAttribute("id");
4、attributes 屬性
div.attributes.id.value;//myDiv
div.attributes.getNamedItem("id").nodeValue;//myDiv
div.attributes["id"].nodeValue;//myDiv
5、設定新的值
element.attributes["id"].nodeValue = "someOtherId";
6、刪除特性
element.attributes.removeNamedItem("id");
7、建立元素
使用document.createElement()方法可以建立新元素
var userName = document.createElement("input");
新增屬性
userName.setAttribute("id","userName");
userName.setAttribute("name","userName");
userName.setAttribute("value","liuwenlaing");
userName:<input id="userName" name="userName" value="liuwenlaing">
通過appendChild()、 insertBefore()或 replaceChild()把新元素新增到文件樹中。
var div = document.getElementById("myDiv");
div.appendChild(userName);
div:
//<div id="myDiv" align="left" my_special_attribute="hello!"><input id="userName" name="userName" value="liuwenlaing"></div>
直接建立元素資訊：
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");
8、元素的子節點
<html>
<head>
</head>
<body>
<form>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</form>
</body>
</html>
for(var i = 0 ; i < items.length;i++){
console.log(items[i]);
}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
這裡<ul>的後代中只包含直接子元素。不過，如果它包含更多層次的後代元素，那麼各個層次中包含的<li>元素也都會返回。