[JavaScript]DOM扩展（一）

最新推荐文章于 2022-07-13 13:42:39 发布

akueq

最新推荐文章于 2022-07-13 13:42:39 发布

阅读量226

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/fqq_5280/article/details/81585104

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

DOM扩展

选择符API

quertSelector()方法

querySeletorAll()方法

上面两个方法都接受一个CSS选择符，这是一个静态的查询。

matchesSelector()方法

接受一个参数（CSS选择符），如果调用元素与该选择符匹配，则返回true

目前没有浏览器支持该方法，但是有一些浏览器通过不规范的名字实现了它的功能

chrome：webkitMatchesSelector
Firefox (Gecko) ：mozMatchesSelector （3.6(1.9.2) ）
Internet Explorer ：msMatchesSelector （9.0 ）
Opera：
- 11.5 ：oMatchesSelector
- 15.0 ：webkitMatchesSelector
Safari (WebKit) ：webkitMatchesSelector （5.0 ）

元素遍历

对于元素间的空格，==IE9及之前版本==不会返回文本节点，而其他所有浏览器都会返回文本节点。

.childElementCount ->等于node.children.length 没啥大用 (IE不兼容)
firstElementChild (IE不兼容)
lastElementChild (IE不兼容)
nextElementSibling (IE不兼容)
prevElementSibling (IE不兼容)

HTML5

（这里只讨论与DOM节点相关的内容）

getElementsByClassName()方法

接受类名，返回一个NodeList

classList属性

出现之前：在操作类名时，需要通过className属性添加、删除和替换类名。

<div class="bd user disable">******</div>
//现在有一个DIV有三个类名，删除其中的 user类 代码如下

//先取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);
//找到要删的类名
var pos = -1,i,len;
for(i=0, len=classNames.length; i < len; i++) {
    if(classNames[i] == "user") {
        pos = i;
        break;
    }
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串并重新设置
diw.className = classNames.join(" ");

这真的很麻烦，而且过程无法简化。

HTML5：为所有元素添加了classList属性。

add()方法：将给定的字符串值添加到列表中，如果值已经存在，就不添加了
contains()方法：表示列表中是否存在给定的之，如果存在则返回true
remove()方法：从列表中删除给定的字符串
toggle()方法：如果列表中已经存在给定的值，删除它；如果没有，添加它

//这样一行代码我就能实现上面的功能
div.classList.remove("user");

焦点管理

HTML5也添加了辅助管理的DOM焦点功能。

document.axtiveElement 属性：这个属性始终会引用DOM中当前获得了焦点的元素。

元素获得焦点：页面加载，用户输入（通常是tab键）和在代码中调用了focus()方法

document.hasElement() 方法：用于确定文档是否获得了焦点。

HTMLDocument的变化

readyState属性：这个属性有两个可能的值。
- loading ：正在加载文档
- complete：已经加载完文档
compatMode 属性：检测页面的兼容模式
- CSS1Compat：标准模式
- BackCompat：混杂模式
head属性：引用文档的<head>元素

自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加，随便命名。

添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。dateset属性的值是DOMStringMap的一个实例。

<div id="myDiv" data-appId="12345" data-myName="Nicholas"></div>

var div = document.getElementById("myDiv");

var appId = div.dataset.appId;
var myName = div.dataset.myName;

div.dataset.appId = 23456;
div.dataset.myName = "Michael";

上面就是使用方法。

akueq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript]DOM扩展（一）

DOM扩展选择符APIquertSelector()方法querySeletorAll()方法上面两个方法都接受一个CSS选择符，这是一个静态的查询。matchesSelector()方法接受一个参数（CSS选择符），如果调用元素与该选择符匹配，则返回true目前没有浏览器支持该方法，但是有一些浏览器通过不规范的名字实现了它的功能chrome：we...
复制链接

扫一扫