DOM元素的特性与属性,返本求源

DOM成分querySelectorAll或然让您意想不到的特点表现

2015/11/07 · HTML5 ·
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,那些天性是被协理的。既然展现的公文没变,那就翻开一下要素呢。
图片 1

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

如上的那一个小案例就事关到了DOM操作时经常被忽视的四个题材:本性与品质的界别

返本求源

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

图片 2

Property是对于某一门类特征的叙述。可以如此敞亮,在DOM成分中能够透过点语法访问,又不是明媒正娶个性的都得以变成属性。

DOM中存有的节点都达成了Node接口。Node接口是在DOM1级中定义的,个中定义了一些用来描述DOM节点的性质和操作方法。

图片 3

广阔的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的性格。对于Node接口的具体贯彻者,HTMLElement不仅继承了这几个属性,还保有八个wac规范中的四个正规特性:id、title、lang、dir、class和贰本性情:attributes。

每三个因素都有八个或四个性子,那么些特点的用途是付出相应成分或其内容的增大音信。通过DOM成分间接操作天性的的章程有多少个:

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

那多少个法子都得以操作自定义脾气。而是只有公认的(非自定义)本性才会以属性的款型丰盛到DOM对象中,以属性情势操作那几个特色会被一并到html标签中DOM元素的特性与属性,返本求源。。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是3个布尔值,用来提示该脾气是不是被显明设置。

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标签上:

图片 4

留神,尽管性子节点也兑现了Node接口,但性情却不被认为是DOM文书档案树的一片段。

在有着的DOM节点中attributes属性是Element类型所独有的的习性。从技术角度来说,性子就是存在于成分的attributes属性中的节点。attributes属性属于NamedNodeMap类型的实例。成分的每三个性格节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

  • getNamedItem(name):重回特性名为name的特点节点
  • removeNamedItem(name):删除本性名为name的风味节点
  • setNamedItem(attr):像成分中添加三个特色节点
  • 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三者关系应该那样画:

图片 5

动用计算

依照以上DOM基础知识和实际工作经验,笔者将特色和质量的分别联系总计如下:

  1. 性子以及公认天性能够透过点语法访问;html5专业中,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 收藏
评论

图片 6

在守旧的 JavaScript 开发中,查找 DOM
往往是开发职员碰着的首先个头痛的标题,原生的 JavaScript 所提供的 DOM
选拔格局并不多,仅仅局限于通过 tag, name, id
等艺术来查找,那鲜明是遥远不够的,假若想要实行特别准确的选用只可以选择看起来尤其麻烦的正则表明式,或许应用某些库。事实上,未来有所的浏览器厂商都提供了
querySelector 和 querySelectorAll 那多个章程的支撑,甚至就连微软也派遣了
IE 8 作为援助这一风味的象征,querySelector 和 querySelectorAll 作为查找
DOM 的又一路子,一点都不小地惠及了开发者,使用它们,你能够像使用 CSS
选取器一样飞速地查找到你必要的节点。

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

本文所在的页面藏匿了上边那几个代码:

<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>

正是下边那样的显现(为了便于观察,笔者加了边框背景观和文字):

图片 7

率先说点大家都领会的热热身。

  • querySelectorquerySelectorAll IE8+浏览器支持。
  • querySelector回到的是单个DOM成分;querySelectorAll归来的是NodeList.
  • 作者们一般用的多的是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,如下截图:
图片 8

好了,下边都以肯定的,好,下面初阶体现点有意思的。

大家看下上面2行容易的查询语句:

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");

图片 9

叩问:上面八个语句重返的NodeList的内容是或不是是一样的?

给大家1分钟的时辰动脑筋下。

//zxx: 假诺1分钟已经离世了

好了,答案是:不一样的。估计不少人跟作者同样,会以为是一律的。

实际上:

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;

世家要是有问号,能够在控制台测试下,下图正是本身要好测试的结果:

图片 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选用器是单身于一体页面包车型大巴!

怎么样看头啊?比如说你在页面很深的2个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。某天代码复查时,见到一段为某节点设置文本的代码:

  querySelector

二 、:scope与区域选取范围

其实,要想querySelectorAll末尾选择器不受全局影响,也是有主意的,就是运用最近还处于试验阶段的:scope伪类,其遵守正是让CSS是在某一限量内选取。此伪类在CSS中选取是元宝,可是也足以在querySelectorAll语句中利用:

JavaScript

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

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

包容性如下:

图片 11

自作者写此文时候是15年10月底,近日大约就FireFox浏览器扶助,小编推测,以后,会帮助更多的。为何吗?

因为Web
Components须要它,能够完毕真正独立包装,不会受外界影响的HTML组件。

关于:scope此时此刻支持尚浅,时机未到,笔者就没须要乱展开了,点到甘休。

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

querySelector 和 querySelectorAll
的行使越发的简约,就好像标题说到的均等,它和 CSS
的写法完全一致,对于前端开发职员来说,那是难度大约为零的3回学习。假如大家有多少个id 为 test 的 DIV,为了博取到那么些因素,你恐怕会像上面那样:

三 、结语依旧要的

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

感谢阅读,欢迎纠错,欢迎调换!

1 赞 1 收藏
评论

图片 12

  那段代码执行后并未生效,虽说innerText不是行业内部属性,尚未被ff帮助,可用的是chrome,那性情情是被扶助的。既然展现的文本没变,那就翻开一下元素呢。

  document.getElementById("test");

图片 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地图