资讯专栏INFORMATION COLUMN

DOM疑惑点整理(一)

Moxmi / 1023人阅读

摘要:和定义区别是多种类型节点的集合,是元素类型节点的集合。当查询文档时,该方法对大小写不敏感。但是在及之前版本用访问返回一个对象,访问返回函数。及之前版本,用设置属性,不会有任何效果。不建议用使用和更方便。

Nodelist和HTMLCollection 定义区别

Nodelist是多种类型节点的集合,HTMLCollection是元素类型节点的集合。

API区别

返回Nodelist的API:Node.childNodes 和 document.querySelectorAll
返回HTMLCollection的API:
Node.children、
document.getElementsByTagName、
document.getElementsByTagNameNS、
document.getElementsByClassName

属性、方法区别

两者共有:
length: NodeList 对象中包含的节点个数.
item (id):返回NodeList对象中指定索引的节点,如果索引越界,则返回null.
HTMLCollection特有方法:
namedItem(name): 如果文档是 HTML 文档,该方法会首先查询带有匹配给定名称的 id 属性的节点,如果不存在匹配的 id 属性,则查询带有匹配给定名称的 name 属性的节点。当查询 HTML 文档时,该方法对大小写不敏感。

非数组

两者都类数组,但非数组,于是不能使用Array的方法,但可把两者先转换为数组。

    function convertToArray(args){
        var array = null;
        try{
            array = Array.prototype.slice.call(args); 
            //ES6可以如下写
            //array = Array.from(args);
        }catch(ex){                             
            array = new Array();                   //针对IE8之前
            for(var i=0,len=args.length;i
getAttribute

一般利用getAttribute访问元素的style和onclick属性都会返回字符串类型的相应代码。
但是在IE7及之前版本用getAttribute访问style返回一个对象,访问onclick返回函数。
IE7及之前版本,用setAttribute设置style属性,不会有任何效果。
不建议用getAttributeNode、setAttributeNode,使用getAttribute、setAttribute和removeAttribute更方便。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93740.html

相关文章

  • DOM疑惑整理(二)内联、嵌入、外联样式访问

    摘要:内联样式外联样式样式属性,写在外部文件,通过链接导入。内联样式注意点样式的应用,采取就近原则,因此一般情况优先级是内联样式嵌入样式外联样式。中有新的方式去查看完整的属性某元素内联外联嵌入样式合起来计算后的属性。 访问的style属性为空? 有时候,直接通过某元素的style属性去查看相关信息时,会发现查看到的是空的属性。原因很简单,style属性只能访问内联样式,而你把css写在了外部...

    Lucky_Boy 评论0 收藏0
  • DOM疑惑整理(三)

    摘要:好的,这些是众所周知的。和两者最大区别就是是否会改变调用它们的节点自身,类似上面与的其二中所描述。并未写入规范,不建议使用,而且会导致调用它的节点自身消失。两者可能因为浏览器不同,输出的文本格式略有差别 innerHTML和outerHTML 先说一个几乎众所周知的,innerHTML和outerHTML中的内容都会被解析为DOM子树,其二就是, let txt = doc...

    高胜山 评论0 收藏0
  • DOM疑惑整理(三)

    摘要:好的,这些是众所周知的。和两者最大区别就是是否会改变调用它们的节点自身,类似上面与的其二中所描述。并未写入规范,不建议使用,而且会导致调用它的节点自身消失。两者可能因为浏览器不同,输出的文本格式略有差别 innerHTML和outerHTML 先说一个几乎众所周知的,innerHTML和outerHTML中的内容都会被解析为DOM子树,其二就是, let txt = doc...

    lucas 评论0 收藏0
  • 前端渲染过程的二三事

    摘要:前端渲染过程的二三事本文不会介绍整个前端渲染过程的步骤,只是记录最近阅读的文章的些许思考和感悟。那么现在我们可以明白这个问题的关键所在了,因为在大部分页面中是拥有的,而由于其解析顺序,那么在事件之前必定已经成功构造树。 前端渲染过程的二三事 本文不会介绍整个前端渲染过程的步骤,只是记录最近阅读的文章的些许思考和感悟。(文章地址一(系列),文章地址二) 希望大家在阅读这篇文章之前能将上述...

    Rindia 评论0 收藏0
  • 40 行代码内实现个 React.js

    摘要:代码托管这个仓库。假设现在我们需要实现一个点赞取消点赞的功能。如果你对前端稍微有一点了解,你就顺手拈来点赞为了现实当中的实际情况,所以这里特易把这个的结构搞得稍微复杂一些。这里非常暴力地使用了,把两个按钮粗鲁地插入了当中。 作者:胡子大哈原文链接:http://huziketang.com/blog/posts/detail?postId=58aea515204d50674934c3a...

    twohappy 评论0 收藏0

发表评论

0条评论

Moxmi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<