快捷鍵: chazhaojiedian(查找節點) chuangjianjiedian(創建節點)
使用childNodes childElementCount
//=====以下是第一種操作DOM的API，會把空文本節點計算在內。相比下面的第二套API兼容性會好點======
//在控制台獲取對象時：點擊所獲取的對象在firefox中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
DOM節點操作，標簽之間的換行空文本節點在IE瀏覽器和firefox火狐瀏覽器中會讀取，其他瀏覽器不會讀取，需要兼容性方法，見搜狗：遍歷節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必須導入該文件，搜狗輸入domready.js-->
<script>
//----------------這里獲得的所有對象都是可以點開查看各種屬性----------------
myReady(function(){
var ul=document.getElementById('ul1');
var li1=document.getElementById("one");
var li2=document.getElementById("two");
var li3=document.getElementById("three");
console.log(document.childNodes);//返回NodeList類數組對象，即文檔結構下的所有子節點
//console.log(document.childNodes[0]);//獲取文檔第一個子節點：<!DOCTYPE html>對象 ，點開可以看到各種屬性及屬性值(火狐)，在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.firstChild);//獲取文檔第一個子節點：<!DOCTYPE html>對象 ，點開可以看到各種屬性及屬性值(火狐)，在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.childNodes.item(0));//獲取文檔第一個子節點：<!DOCTYPE html>對象 ，點開可以看到各種屬性及屬性值(火狐)，在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.childNodes[0].tagName);//獲取文檔第一個子節點：<!DOCTYPE html>對象的標簽名稱：undefined
//console.log(document.firstChild.tagName);//獲取文檔第一個子節點：<!DOCTYPE html>對象的標簽名稱：undefined
//console.log(document.documentElement);//文檔根節點:html對象，點開可以看到各種屬性及屬性值
//console.log(document.documentElement.tagName);//html標簽名稱
//console.log(document.documentElement.firstChild);//獲取HTML的第一個子節點：head對象，點開可以看到各種屬性及屬性值(火狐）,在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.documentElement.lastChild);//獲取HTML的最后一個子節點：body對象，點開可以看到各種屬性及屬性值(火狐）,在谷歌中顯示的是：所獲取對象下面的所有子元素內容。
//console.log(document.documentElement.firstChild.tagName);//獲取HTML的第一個子節點的標簽名稱:head
//console.log(document.documentElement.lastChild.tagName);//獲取HTML的最后一個子節點的標簽名稱:body
var ul=document.getElementById("ul1");
//獲得第一個和最后一個子節點有三種方式：
//console.log(ul.firstChild);//空文本子節點
//console.log(ul.childNodes[0]);//空文本子節點
//console.log(ul.childNodes.item(0));//空文本子節點
var ul=document.getElementById("ul1");
//獲得除了第一個和最后一個之外的節點有兩種方式：
//console.log(ul.childNodes[1]);
//console.log(ul.childNodes.item(1));
var li=document.getElementById("twoLi");//獲取li對象
//console.log(li.tagName);//獲得li標簽的名稱
//console.log(li.nextSibling);//因為下面每個li都有換行，所以左右兄弟節都是空文本節點，所以這里顯示：#text,謹記。
//console.log(li.previousSibling);//因為下面每個li都有換行，所以左右兄弟節都是空文本節點，所以這里顯示：#text,謹記。
var a=document.getElementById("onea");//獲取a對象
//console.log(a.nextSibling);//獲取下一個兄弟對象: <span>333</span>
//console.log(a.previousSibling);//獲取上一個兄弟對象: <a href="">1111</a>
var ul=document.getElementById("ul1");//獲取ul對象
var a=document.getElementById("onea");//獲取a對象
//console.log(ul.parentNode);//獲得父節點 div
//console.log(a.parentNode);//獲得父節點 li
var ul=document.getElementById("ul1");//獲取ul對象
var a=document.getElementById("onea");//獲取a對象
//console.log(ul.ownerDocument===document);
//console.log(ul.ownerDocument===document);
//console.log(document);//顯示：HTMLDocument file:///D:/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/HTML/%E4%BD%9C%E4%B8%9A%E7%B4%A0%E6%9D%90/textTwo.html 表示獲取該文件的絕對路徑。
var ul=document.getElementById("ul1");//獲取ul對象
var a=document.getElementById("onea");//獲取a對象
var span1=document.getElementById("span1");//獲取span對象
var span2=document.getElementById("span2");//獲取span對象
//console.log(ul.hasChildNodes());//返回:true. 有3個li子節點
//console.log(a.hasChildNodes());//返回:true. 有"2222"文本子節點
//console.log(span1.hasChildNodes());//返回：true 有空文本子節點,即：有一個空格
//console.log(span2.hasChildNodes());//返回:false 沒有節點
})
</script>
</head>
<body id="body">
<div id="div">
<ul id="ul1">
<li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
<li id="twoLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
<li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
//===========================以下是第二種操作DOM的API，忽略空文本節點。不兼容IE8及其以下=============================
//在控制台獲取對象時：點擊所獲取的對象在firefox中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
//第二套API是比較專門針對文本DOM節點進行開發的，所以每個屬性都帶有element(元素)，除了children[i]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必須導入該文件，搜狗輸入domready.js-->
<script>
myReady(function(){
var div=document.getElementById('div');//獲取div對象
//console.log(div.childElementCount);//獲取div的子節點個數，孫子節點不管。
var ul1=document.getElementById("ul1");//獲取ul1對象
//console.log(ul1.firstElementChild);//獲取第一個子元素，點擊在FF中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
//console.log(ul1.lastElementChild);//獲取最后一個子元素，點擊在FF中顯示各種屬性，在chrome中是顯示其子元素以及孫子元素的所有內容。
var a=document.getElementById("onea");//獲取a對象
//console.log(a.nextElementSibling);//獲取id=onea 標簽的下一個兄弟元素
//console.log(a.previousElementSibling);//獲取id=onea 標簽的前面一個兄弟元素
var ul1=document.getElementById("ul1");//獲取ul對象
console.log(ul1.children[0]);//獲取id=ul1的第一個子元素,忽略所有空文本節點
console.log(ul1.children[1]);//獲取id=ul1的第二個子元素,忽略所有空文本節點
console.log(ul1.children[2]);//獲取id=ul1的第三個子元素,忽略所有空文本節點
})
</script>
</head>
<body id="body">
<div id="div">
<ul id="ul1">
<li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
<li id="twoLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
<li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
=============================
document.getElementBy{Id,Name,TagName,ClassName,querySelector,querySelectorAll}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必須導入該文件，搜狗輸入domready.js-->
<script>
//這是一段注釋//
myReady(function(){
//=============document.getElementById=================
//var div=document.getElementById('container');//獲取div對象
//console.log(div.tagName);
//console.log(div.getElementById("ul1"));//getElementById("")只能使用document進行調用，其他的不行。
//var btn=document.getElementById("button");//獲取按鈕對象
//btn.onclick=function(){
// var target=document.getElementById("target");//獲取id="target"對象。
// console.log(target.innerHTML);
// //輸出：這是正確元素。 如果存在多個id="target"，那么只讀取第一個id="target"的元素，默認id只能唯一。
// //在IE7中讀取的是name="target"，輸出的是：這是錯誤元素。這是瀏覽器的一個bug。
//}
//=============解決document.getElementById在IE7中的BUG=================
//解決document.getElementById("")在IE7中誤讀成name的bug。name和id值相等，且name的標簽在前面，IE7會把getElementById("")取成name所在的標簽。這是一個BUG。
//下面可以作為自己的框架進行使用
// var getElementById=function(id){
// var el=document.getElementById(id);
// //使用轉義字符做文章 \ 。 在IE瀏覽器中 \v 並沒有進行轉義，"\v"="v"，這里的"\v1"="v1"。IE瀏覽器解析為字符串。前面的＋號就是為了把這個字符串轉化為數字，把+"\v1"=parseNumber("v1") 返回值：isNaN，!isNaN 就是 !false，返回：true。
// //而在其他瀏覽器中，對"\v"會解釋為一個垂直的制表符，一定程度上相當於空格。即：+"\v1"="1"，+1表示把1轉化為數字，parseNumber(1)=1=true，!true就是false。
// if (!+"\v1") {//所以如果是IE瀏覽器就會返回true，否則返回false。
// if (el && el.id===id) {
// return el;
// }else{
// var els=document.all[id],
// len=els.length;
// for (var i = 0; i < len; i++) {
// if (els[i].id===id) {
// return els[i];
// }
// }
// }
// }
// return el;
// };
// console.log(getElementById("target").tagName);
//=============document.getElementsByName=================
// var li=document.getElementsByName("chose");
// console.log(li);//返回的是NodeList類數組對象
// console.log(li.item(1));//獲得類數組對象第二個對象，上下兩個相等
// console.log(li[1]);//獲得類數組對象第二個對象，上下兩個相等
// console.log(li.length);//獲得類數組對象長度
//=============document.getElementsByTagName=================
// var li = document.getElementsByTagName("li");
// console.log(li);//HTMLCollection類數組對象
// console.log(li.length);//HTMLCollection長度
// console.log(li[0]);//上下兩個相等，都是獲取類數組對象的第一個對象。
// console.log(li.item(0));//上下兩個相等，都是獲取類數組對象的第一個對象。
// console.log(li[0].id);//獲取類數組對象第一個對象的id屬性。
// console.log(li.item(0).innerHTML);//獲取類數組對象第一個對象innerHTML屬性值。
// //其他瀏覽器都會拋出錯誤。+只在IE8以下才有效，第一個返回的 一定是： DOCTYPE html。
// var comment=document.getElementsByTagName("!");//表示全文注釋的點
// console.log(comment[0].nodeValue);//返回：DOCTYPE html
// console.log(comment[1].nodeValue);//如下注釋才有效，返回 <!--必須導入該文件，搜狗輸入domready.js-->
// var all=document.getElementsByTagName("*");//獲取所有元素集合
// console.log(all);//返回的是HTMLCollection類數組對象
// for (var i=0,len=all.length; i < len; i++) {
// console.log(all[i].tagName);
// }
//============以上3個獲取對象的方法所有瀏覽器都實現了，兼容性好===========
//============以下3個獲取對象的方法就需要較新的瀏覽器才可以兼容了===========
//======obj.getElementsByClassName:在對象obj下面獲取對應類名的標簽對象=======
// var ul=document.getElementById("ul2");//獲得ul對象
// var objs=ul.getElementsByClassName("one");
// console.log(objs);//獲得HTMLCollection類數組對象
// console.log(objs.length);//獲得HTMLCollection類數組對象的長度
// console.log(objs[0]);//在ul下面 獲取第一個: class="one"的標簽對象 li
// console.log(objs[1]);//在ul下面 獲取第二個: class="one"的標簽對象 li
// console.log(objs[2]);//在ul下面 獲取第三個: class="one"的標簽對象 span
// var objss=ul.getElementsByClassName("one two");////獲取多個類名的一個HTMLCollection類數組對象
// console.log(objss);//HTMLCollection類數組對象
// console.log(objss[0]);//在ul下面 獲取類名: class="one two"的標簽對象 類名不分先后
// console.log(objss[1]);//在ul下面 獲取類名: class="one two"的標簽對象 類名不分先后
// ======obj.querySelector("")里面參數是CSS選擇器======
// ======obj.querySelectorAll("")里面參數是HTML標簽名稱，返回的NodeList類數組對象======
//
// console.log(document.querySelector("#ul1"));//在文檔中查找id="ul1"的ul對象
// var ul=document.querySelector("#ul1");//獲取id="ul1"的ul對象
// console.log(ul);//在文檔樹輸出id="ul1"的對象
// console.log(ul.querySelector("li:first-child"));//在ul中查找第一個子對象
// console.log(ul.querySelector("li:nth-child(2)"));//在ul中查找三個字對象
// console.log(ul,document.querySelector("#container"));
// console.log(ul.querySelector("li:nth-child(5)"));//輸出不存在的對象，返回null。
// console.log(document.querySelector(".one\\:off"));//因為 : 冒號對於網頁解析來說是特殊符號，所以要使用轉義字符，這里使用兩個反斜杠才可以正常輸出對象：class="one:off"。
// console.log(document.querySelector(".one,.target"));//.one的對象和.target的對象，哪個在文檔樹中比較靠前，就返回前面第一個。這里返回class="target"的p元素，因為p元素比較靠前。
// var container=document.querySelector("#container");//獲取id="container"的對象
// var p=container.querySelectorAll("p");//返回NodeList類數組對象
// console.log(p);//NodeList(2) [p#target.target, p#target]
// console.log(p[0]);//返回類數組對象第一個元素對象。 即：下面id="target"的p標簽。
// console.log(container.querySelectorAll("ul"));//NodeList(2) [ul#ul1, //ul#ul2],返回類數組對象
// console.log(container.querySelectorAll("input"));////對於不存在的input標簽對象，返回空的NodeList類數組對象。
// 不會死循環 staticNodeList
//在文檔中查找id="container"的標簽里面添加ul子元素
var uls=document.querySelectorAll("ul");//ul標簽集合，返回：staticNodeListh靜態的類數組對象，不具有生命，不會使下面陷入死循環。
for (var i = 0; i < uls.length; i++) {
document.querySelector("#container").appendChild(document.createElement("ul"))
}
// 死循環 NodeList
//在文檔中查找id="container"的標簽里面添加ul子元素
// var uls=document.getElementById("container").childNodes;//這里返回的是只要DOM數有修改，那么NodeList就會更新的，所以這里的循環是死循環。上面一個返回的是staticNodeList是靜態的NodeList類數組對象。
//console.log(uls);
//因為每增加一次ul,uls.length就會增加一次，uls是屬於活的NodeList類數組對象
// for (var i = 0; i < uls.length; i++) {
// document.querySelector("#container").appendChild(document.createElement("ul"))
// }
});
</script>
<body>
<div id="container">
<a href="#" name="target">這是錯誤元素</a>
<p id="target" class="target">這是正確元素</p>
<p id="target">這是正確元素</p>
<button type="button" id="button">測試</button>
<ul id="ul1">
<li name="chose" id="li1">innerHTML<a href="">3333</a><a href="" id="onea">111</a><span>222222</span></li>
<li name="chose"><a href="">111</a></li>
<li name="chose"><a href="">111</a></li>
</ul>
<ul id="ul2">
<li class="one:off"><span class="one">woaini</span></li>
<li class="one two">1111</li>
<li class="one two">22222</li>
<li class="one"></li>
</ul>
</div>
</body>