DOM元素的特性与属性

DOM成分querySelectorAll或然让你不意的特色表现

2015/11/07 · HTML5 ·
ca888亚洲娱乐城,DOM,
querySelectorAll

初稿出处:
张鑫旭   

引玉之砖

返本求源——DOM成分的天性与品质

2015/09/06 · HTML5,
JavaScript ·
DOM

最初的小说出处: 木的树   

投砾引珠

诸多前端类库(比如dojo与JQuery)在关系dom操作时都相会到五个模块:attr、prop。某天代码复查时,见到一段为某节点设置文本的代码:

JavaScript

attr.set(node, ‘innerText’, ‘Hello World!’)

1
attr.set(node, ‘innerText’, ‘Hello World!’)

那段代码执行后未有生效,虽说innerText不是标准属性,尚未被ff援助,可用的是chrome,那特性子是被协理的。既然呈现的文本没变,那就翻开一下成分呢。
ca888亚洲娱乐城 1

innerText被添加到了html标签上,而换来prop模块后,成功的为节点替换文本。

以上的这几个小案例就关系到了DOM操作时平时被忽视的二个难点:天性与个性的不一样

返本求源

在DOM中,特性指的是html标签上的习性,比如:

ca888亚洲娱乐城 2

Property是对于某壹项目特征的叙说。能够如此精通,在DOM成分中能够透过点语法访问,又不是正式天性的都得以变成属性。

DOM中保有的节点都落到实处了Node接口。Node接口是在DOM一级中定义的,个中定义了壹部分用来讲述DOM节点的属性和操作方法。

ca888亚洲娱乐城 3

普遍的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的性质。对于Node接口的有血有肉达成者,HTMLElement不仅继续了那几个属性,还持有多个wac规范中的八个标准天性:id、title、lang、dir、class和②特品质:attributes。

每3个要素都有四个或三个特色,那些特色的用途是交由相应成分或其剧情的附加音信。通过DOM元素直接操作本性的的措施有多个:

  • getAttribute(attrName)
  • setAttribute(attrName, value)
  • removeAttribute(name)

这五个法子都得以操作自定义特性。而是唯有公认的(非自定义)天性才会以属性的款型丰硕到DOM对象中,以属个性局操作那几个特点会被1并到html标签中。HTMLElement的⑤性格状都有对应属性与其相比较:id、title、lang、dir、className。在DOM中以属性情局操作那多少个特点会联合到html标签中。

而是,HTML5行业内部对自定义性情做了提升,只要自定义性情以”data-attrName”的款式写入到html标签中,在DOM属性中就能够透过element.dataset.attrName的款型来访问自定义性情,如:

XHTML

<input type=​”text” name=​”as_q” class=​”box”
id=​”searched_content” title=​”在此输入搜索内容。” disabled=​”false”
data-ff=​”fsdf”>​ seh.dataset.ff

1
2
<input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" disabled=​"false" data-ff=​"fsdf">​
seh.dataset.ff

要素的表征在DOM中以Attr类型来表示,Attr类型也兑现了Node接口。Attr对象有多少个属性:name、value、specified。个中,name是特点的名称,value是特色值,specified是三个布尔值,用来提醒该性情是或不是被显眼设置。

document.createAttribute方法能够用来创建特性节点。例如,要为元素添加align天性能够应用如下方法:

JavaScript

ar attr = document.createAttribute(‘align’) attr.value = ‘left’
seh.setAttributeNode(attr)

1
2
3
ar attr = document.createAttribute(‘align’)
attr.value = ‘left’
seh.setAttributeNode(attr)

要将新创制的特色添加到成分上,必须利用要素的setAttributeNode方法。添加特性后,天性会反映在html标签上:

ca888亚洲娱乐城 4

注意,固然脾性节点也兑现了Node接口,但性格却不被认为是DOM文书档案树的壹有的。

在颇具的DOM节点中attributes属性是Element类型所独有的的本性。从技术角度来说,天性正是存在于成分的attributes属性中的节点。attributes属性属于NamedNodeMap类型的实例。成分的每四个特征节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

  • getNamedItem(name):重临性子名叫name的特征节点
  • DOM元素的特性与属性。removeNamedItem(name):删除天性名称为name的特色节点
  • setNamedItem(attr):像成分中添加2个风味节点
  • item(pos):重回位于数组pos处的节点

获得、设置、删除成分节点能够如下格局:

JavaScript

element.attributes.getNamedItem(‘align’) //获取 var attr =
document.createAttribute(‘align’); attr.value = ‘right’;
element.attributes.setNamedItem(attr); //添加
element.attributes.removeNamedItem(‘align’); //删除

1
2
3
4
5
6
7
element.attributes.getNamedItem(‘align’) //获取
 
var attr = document.createAttribute(‘align’);
attr.value = ‘right’;
element.attributes.setNamedItem(attr); //添加
 
element.attributes.removeNamedItem(‘align’); //删除

实际上使用中并不建议利用本性节点的艺术,而getAttribute、setAttribute、removeAttribute方法远比操作本性节点更有利。

DOM、attributes、Attr三者关系应该如此画:

ca888亚洲娱乐城 5

选取总结

依照上述DOM基础知识和实际工作经历,作者将特色和性能的分别联系总计如下:

  1. 属性以及公认个性能够透过点语法访问;html伍正规中,data-*花样的自定义天性能够经过element.dataset.*的花样来拜会,不然用getAttribute
  2. 特点值只可以是字符串,而属性值可以是任意JavaScript匡助的花色
  3. 多少个分外性状:
    1. style,通过getAttrbute和setAttribute来操作那几个天性只好取得或安装字符串;而已属特性局来操作就是在操作CSSStyleDeclaration对象
    2. 事件处理程序,通过特征格局取得和传递的都只是函数字符串;而已属性形式操作的是函数对象
    3. value,对于支撑value的要素,最佳通过质量方式操作,而且操作不会呈现在html标签上
    XHTML

    seh.value = 10 &lt;input type="text" name="as\_q" class="box"
    id="searched\_content" title="在此输入搜索内容。"
    disabled="false" data-ff="fsdf" align="left"&gt;

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d12396477911-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d12396477911-2">
    2
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d12396477911-1" class="crayon-line">
    seh.value = 10
    </div>
    <div id="crayon-5b8f379c97d12396477911-2" class="crayon-line crayon-striped-line">
    &lt;input type=&quot;text&quot; name=&quot;as_q&quot; class=&quot;box&quot; id=&quot;searched_content&quot; title=&quot;在此输入搜索内容。&quot; disabled=&quot;false&quot; data-ff=&quot;fsdf&quot; align=&quot;left&quot;&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

4.  href,通过属性方式设置可以反映到html标签上,但用过点语法和getAttribute能够取到的值并不一定相同


    XHTML

    &lt;a href="/jsref/prop\_checkbox\_tabindex.asp"
    id="tabI"&gt;tabIndex&lt;/a&gt; link.getAttribute('href') //
    "/jsref/prop\_checkbox\_tabindex.asp" link.href //
    "http://www.w3school.com.cn/jsref/prop\_checkbox\_tabindex.asp"

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d15903857159-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d15903857159-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d15903857159-1" class="crayon-line">
    &lt;a href=&quot;/jsref/prop_checkbox_tabindex.asp&quot; id=&quot;tabI&quot;&gt;tabIndex&lt;/a&gt;
    </div>
    <div id="crayon-5b8f379c97d15903857159-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d15903857159-3" class="crayon-line">
    link.getAttribute('href') // &quot;/jsref/prop_checkbox_tabindex.asp&quot;
    </div>
    <div id="crayon-5b8f379c97d15903857159-4" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d15903857159-5" class="crayon-line">
    link.href // &quot;http://www.w3school.com.cn/jsref/prop_checkbox_tabindex.asp&quot;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

5.  disabled和checked,对于支持这两个特性的元素来说,他们在html标签中都是无状态的,只要有独立的标签属性在以点语法访问时就返回true,如果html标签属性不存在,则以点语法访问时就是false


    XHTML

    &lt;input type=​"text" name=​"as\_q" class=​"box"
    id=​"searched\_content" title=​"在此输入搜索内容。"
    disabled=​"false" data-ff=​"fsdf" align=​"left"&gt;​
    seh.disabled // true seh.disabled = false &lt;input type=​"text"
    name=​"as\_q" class=​"box" id=​"searched\_content"
    title=​"在此输入搜索内容。" data-ff=​"fsdf" align=​"left"&gt;​

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-6">
    6
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f379c97d19172676562-1" class="crayon-line">
    &lt;input type=​&quot;text&quot; name=​&quot;as_q&quot; class=​&quot;box&quot; id=​&quot;searched_content&quot; title=​&quot;在此输入搜索内容。&quot; disabled=​&quot;false&quot; data-ff=​&quot;fsdf&quot; align=​&quot;left&quot;&gt;​
    </div>
    <div id="crayon-5b8f379c97d19172676562-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d19172676562-3" class="crayon-line">
    seh.disabled // true
    </div>
    <div id="crayon-5b8f379c97d19172676562-4" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f379c97d19172676562-5" class="crayon-line">
    seh.disabled = false
    </div>
    <div id="crayon-5b8f379c97d19172676562-6" class="crayon-line crayon-striped-line">
    &lt;input type=​&quot;text&quot; name=​&quot;as_q&quot; class=​&quot;box&quot; id=​&quot;searched_content&quot; title=​&quot;在此输入搜索内容。&quot; data-ff=​&quot;fsdf&quot; align=​&quot;left&quot;&gt;​
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

1 赞 1 收藏
评论

ca888亚洲娱乐城 6

在价值观的 JavaScript 开发中,查找 DOM
往往是开发人士碰着的首先个发烧的题材,原生的 JavaScript 所提供的 DOM
选拔方式并不多,仅仅局限于经过 tag, name, id
等艺术来查找,那肯定是远远不够的,即使想要举行更为准确的精选只好动用看起来特别繁琐的正则表明式,大概应用有些库。事实上,未来怀有的浏览器厂商都提供了
querySelector 和 querySelectorAll 这多少个主意的支撑,甚至就连微软也派出了
IE 捌 作为匡助那1特色的表示,querySelector 和 querySelectorAll 作为查找
DOM 的又一路线,十分大地方便了开发者,使用它们,你能够像使用 CSS
选拔器1样便捷地查找到你须要的节点。

一、时间燃眉之急,废话少说

正文所在的页面藏匿了下边这一个代码:

<img id=”outside”> <div id=”my-id”> <img id=”inside”>
<div class=”lonely”></div> <div class=”outer”> <div
class=”inner”></div> </div> </div>

1
2
3
4
5
6
7
8
<img id="outside">
<div id="my-id">
    <img id="inside">
    <div class="lonely"></div>
    <div class="outer">
        <div class="inner"></div>
    </div>
</div>

就是上边那样的变现(为了有利于观察,作者加了边框背景观和文字):

ca888亚洲娱乐城 7

第二说点大家都了然的热热身。

  • querySelectorquerySelectorAll IE八+浏览器援救。
  • querySelector归来的是单个DOM成分;querySelectorAll回去的是NodeList.
  • 大家1般用的多的是document.querySelectorAll,
    实际上,也支持dom.querySelectorAll.例如:
JavaScript

document.querySelector("\#my-id").querySelectorAll("img")

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f2fbc48034065158916-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f2fbc48034065158916-1" class="crayon-line">
document.querySelector(&quot;#my-id&quot;).querySelectorAll(&quot;img&quot;)
</div>
</div></td>
</tr>
</tbody>
</table>

挑选的便是在那之中那几个妹子。例如,笔者在决定台出口该选拔NodeList的长度和id,如下截图:
ca888亚洲娱乐城 8

好了,下边都以可想而知的,好,下边开端体现点有意思的。

世家看下上边贰行简单的查询语句:

JavaScript

document.querySelectorAll(“#my-id div div”);

1
document.querySelectorAll("#my-id div div");

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“div div”);

1
document.querySelector("#my-id").querySelectorAll("div div");

ca888亚洲娱乐城 9

叩问:上边七个语句重临的NodeList的内容是或不是是一样的?

给我们一分钟的岁月动脑筋下。

//zxx: 假若一分钟已经与世长辞了

好了,答案是:差别等的。推断不少人跟自己同样,会认为是相同的。

实际上:

JavaScript

document.querySelectorAll(“#my-id div div”).length === 1;

1
document.querySelectorAll("#my-id div div").length === 1;

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“div div”).length ===
3;

1
document.querySelector("#my-id").querySelectorAll("div div").length === 3;

我们只要有疑点,能够在控制台测试下,下图正是自身要好测试的结果:

ca888亚洲娱乐城 10

为什么会这么?

率先个适合我们的敞亮,不解释。那下叁个话语,为什么重临的NodeList长度是3呢?

首先,遍历该NodeList会发觉,查询的七个dom成分为:div.lonelydiv.outerdiv.inner.

意外,奇怪,怎么会是二个吗?

jQuery中有个find()方法,大家很恐怕遇到这一个点子影响,导致出现了部分认知的难题:

JavaScript

$(“#my-id”).find(“div div”).length === 1;

1
$("#my-id").find("div div").length === 1;

如果运用find方法,则是1个门户万分;由于组织和功能类似,我们很当然疑问原生的querySelectorAll也是那些套路。真是太错特错!!

要解释,为何NodeList长度是3,只要一句话就能够了,小编特意加粗标红:

CSS选取器是独自于1切页面包车型大巴!

什么看头啊?比如说你在页面很深的三个DOM里面写上:

<style> div div { } </style>

1
2
3
<style>
div div { }
</style>

 

全副网页,包蕴父级,只假诺满意div div父子关系的成分,全体会被入选,对吗,那一个大家应该都知晓的。

这里的querySelectorAll当中的选用器也如出一辙是这也全局脾气。document.querySelector("#my-id").querySelectorAll("div div")翻译成白话文就是:查询#my-id的子成分,同时满足全体页面下div div选取器条件的DOM成分们。

咱俩页面往上滚动看看原始的HTML结构,会意识,在大局视野下,div.lonelydiv.outerdiv.inner整套都知足div div其一采用器条件,于是,最终回到的尺寸为3.

  很多前端类库(比如dojo与JQuery)在论及dom操作时都会见到八个模块:attr、prop。某天代码复查时,见到1段为某节点设置文本的代码:

  querySelector

2、:scope与区域选用范围

其实,要想querySelectorAll背后选择器不受全局影响,也是有艺术的,便是使用近年来还地处试验阶段的:scope伪类,其效果正是让CSS是在某一限量内接纳。此伪类在CSS中使用是元宝,可是也足以在querySelectorAll语句中利用:

JavaScript

document.querySelector(“#my-id”).querySelectorAll(“:scope div div”);

1
document.querySelector("#my-id").querySelectorAll(":scope div div");

包容性如下:

ca888亚洲娱乐城 11

我写此文时候是1伍年3月尾,最近大致就FireFox浏览器帮衬,笔者猜度,以往,会支撑越多的。为什么吧?

因为Web
Components要求它,可以兑现真正独立包装,不会受外界影响的HTML组件。

关于:scope近期帮忙尚浅,时机未到,作者就没要求乱展开了,点到完工。

attr.set(node, 'innerText', 'Hello World!')

querySelector 和 querySelectorAll
的行使非常大约,就好像标题谈到的同等,它和 CSS
的写法完全相同,对于前端开发职员的话,那是难度差不多为零的二遍学习。假使大家有一个id 为 test 的 DIV,为了获取到这些元素,你也许会像上面那样:

叁、结语照旧要的

参照小说:querySelectorAll from an element probably doesn’t do what you
think it
does

谢谢阅读,欢迎纠错,欢迎交换!

1 赞 1 收藏
评论

ca888亚洲娱乐城 12

  那段代码执行后尚未生效,虽说innerText不是标准属性,尚未被ff帮衬,可用的是chrome,这一个天性是被协助的。既然呈现的文件没变,那就翻开一下要素呢。

  document.getElementById("test");

ca888亚洲娱乐城 13

近日大家来试试使用新点子来得到那么些 DIV:

  innerText被添加到了html标签上,而换到prop模块后,成功的为节点替换文本。

  document.querySelector("#test");
  document.querySelectorAll("#test")[0];

  以上的这几个小案例就涉及到了DOM操作时平日被忽略的贰个标题:性格与天性的分别

获取文书档案中 class=”example” 的率先个

 

元素:

 

  document.querySelector("p.example");

返本求源

得到文书档案中有 “target” 属性的第二个 成分:

    在DOM中,脾气指的是html标签上的性质,比如:

  document.querySelector("a[target]");
网站地图xml地图