DOM选择器

mac2022-06-30 37

DOM选择器分为：id、class、name、tagname、高级、关系选择器;（返回的都是标签）

一：元素节点选择器：

1. id: 返回的是单个对象

<body> <div class="box" a="10" b="20" id="cont" name="wode"></div> </body> var ocont=document.getElementById("cont"); //找到的是有id名为"cont"的div标签; console.log(ocont); //<div class="box" a="10" b="20" id="cont" name="wode"></div> console.log(typeof ocont); //object;

2. class:返回的是数组对象，可以通过索引解析，专门用在input表单中；

var obox=document.getElementsByClassName("box"); console.log(obox); //HTMLCollection [div#cont.box, cont: div#cont.box, wode: div#cont.box]; 返回的是数组对象 console.log(obox[0]); //<div class="box" a="10" b="20" id="cont" name="wode"></div> console.log(obox[1]); //undefined;这里的数组是一个个class名为box的标签，索引得到的也是标签，里面的属性名和属性值可以通过attributes等获取。

3. name: 返回的是数组对象，可以通过索引解析

var owode=document.getElementsByName("wode"); console.log(owode); //NodeList [div#cont.box]; console.log(obox[0]); //<div class="box" a="10" b="20" id="cont" name="wode"></div> console.log(owode[1]) //undefined;规则和class选择器相同，见上！

4. tagname:返回的是数组对象，可以通过索引解析

var oa=document.getElementsByTagName("div"); console.log(oa); //HTMLCollection [div#cont.box, cont: div#cont.box, wode: div#cont.box]; 规则和索引取得的值与上面两个选择器相同！

===================================================================================================================================

5.高级选择器，ES5新增

query.Selector():返回的是单个对象;()里写的是css选择器,如：.box、#cont等

var ele=document.querySelector("#cont"); console.log(ele); //<div class="box" a="10" b="20" id="cont" name="wode"></div>

　　当有多个同级元素时，返回最近的一个，即最上面那个;

var aaa=document.querySelector(".box"); console.log(aaa); //<div class="box" a="10" b="20" id="cont" name="wode"></div>; //第二个div并没有被显示时

　　querySelectorAll():返回的是数组对象，可以通过索引解析;()里写的是css选择器,如：.box、#cont等

var ele=document.querySelectorAll(".box"); console.log(ele) //NodeList(2) [div#cont.box, div.box];显示一个数组里面有两个div标签

二：关系选择器

1.父选子：返回数组对象，可以通过索引解析

var obox=document.querySelector(".box"); console.log(obox.children) // HTMLCollection(2) [li.msg, li];返回class名为box的标签内所有子标签； //当有多个同级元素时，显示最上面那个

2.子选父：返回单个对象

var omsg=document.querySelector(".msg"); console.log(omsg.parentNode) //<div class="box" a="10" b="20" id="cont" name="wode">

3.第一个子：单个对象

var obox=document.querySelector(".box"); console.log(obox.firstElementChild) ; //<li class="msg"></li>

4.最后一个子：单个对象

var obox=document.querySelector(".box"); console.log(obox.lastElementChild) ; //<li></li>

=================

5.上一个兄弟：单个对象

var omsg=document.querySelector(".msg"); console.log(omsg.previousElementSibling) ; //<p></p>

6.下一个兄弟：单个对象

var omsg=document.querySelector(".msg"); console.log(omsg.nextElementSibling) ; //<li></li>

=================================================================================================================================

三；其他节点选择器

1:父选子：返回数组对象，可以通过索引解析

var obox=document.querySelector(".box"); console.log(obox.childNodes) //NodeList(7) [text, p, text, li.msg, text, li, text]; //其中空格+航换行也是一个文本对象，注释属于注释对象 console.log(obox.childNodes[1]) //<p></p> console.log(obox.childNodes[1]) //#text

2：上一个兄弟：返回单个对象

var omsg=document.querySelector(".msg"); console.log(omsg.previousSibling); //#text;空格换行也是一个文本对象

3：写一个兄弟：返回单个对象

var omsg=document.querySelector(".msg"); console.log(omsg.nextSibling); //#text;空格换行也是一个文本对象

4.第一个子：返回单个对象

var obox=document.querySelector(".box"); console.log(obox.firstChild) //#text;空格换行也是一个文本对象

5.最后一个子：返回单个对象

var obox=document.querySelector(".box"); console.log(obox.lastChild) //#text;空格换行也是一个文本对象

补充：

节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue) 元素节点 1 标签名 null 文本节点 3 #text 文本注释节点 8 #comment 注释的文字文档节点 9 #document null 属性节点 2 属性名属性值

转载于:https://www.cnblogs.com/zhouqingfeng/p/11408183.html

最新回复(0)