javascript高级程序设计第十一章 DOM扩展笔记

11.1 选择符API

众多js库中最常用的一项功能，就是根据CSS选择符选择与某个模式匹配的DOM元素。实际上jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用。

11.1.1 querySelector()方法

接受一个CSS选择符，返回与该模式匹配的第一个元素，若没找到匹配的元素则返回null

若是Document类型调用querySelector()方法则在整个文档内搜寻匹配元素，是元素调用的querySelector()方法则在该元素后代元素下寻找匹配元素

//取得body元素
var body = document.querySelector("body");
//取得ID为myDiv的元素
var myDiv = document.querySelector("#myDiv");
//取得类为value的元素
var value = document.querySelector(".value");
//在body元素下取得类为button的第一个图像元素
var img = document.body.querySelector("img.button");

11.1.2 querySelectorAll()方法

querySelectorAll()方法接受的参数和querySelector()方法是一样的，接受一个CSS选择符

但是querySelectorAll()方法返回的是所有匹配的元素，返回的是一个NodeList实例

//找寻ID为myDiv的元素下所有的p元素
var ps = document.getElementById("myDiv").querySelectorAll("p");
//找寻文档下所有的div元素
var divs = document.querySelectorAll("div");
//找寻p元素下所有的strong元素
var strongs = document.querySelectorAll("p strong");

11.1.3 matchesSelector()方法

接受一个参数，即CSS选择符，若调用元素与该选择符匹配，返回true,不匹配则返回false

if(document.body.matchesSelector("body.page1"){
//true
}

取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被querySelector()方法或是querySelectorAll()方法返回

11.2 元素遍历

p288-p289

11.3 HTML5

11.3.1 与类相关的补充

2.classList属性

操作类名时，需要通过className属性添加、删除和替换类名

<div class = “bd user disabled”>…</div>

这个div元素有三个类名，要从中删除一个类名则需把三个类名拆开，删掉那个不想要的类名，再把其他类名拼成一个新的字符串

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

HTML5为所有元素添加了classList属性。
这个classList属性是新集合类型DOMTokenList的实例。取得每个元素可用方括号语法或是item()方法。
这个新类型还定义了以下方法。

• add() 将给定的字符串添加到列表中。若值已存在就不再添加了。
• contains() 表示列表中是否存在给定的值，存在返回true，不存在返回false
• remove() 从列表中删除给定的字符串
• toggle() 若列表中存在已经给定的值，则删除它；不存在则删除它。

那么前面的代码可由下面一行代码代替

div.classList.remove("user");    //删除user这个类

11.3.2 焦点管理

辅助管理DOM焦点的功能

document.activeElement属性会引用DOM中当前获得了焦点的元素（获得焦点方式：页面加载，用户输入[按tab键改变焦点]，在代码中调用focus()方法）

var button = document.getElementById("mybtn");
button.focus();    //调用focus()方法获得焦点
console.log(document.activeElement == button);    //true

document.hasFocus()方法确定文档是否获得了焦点

var button = document.getElementById("mybtn");
button.focus();    //调用focus()方法获得焦点
console.log(document.hasFocus());    //true

11.3.3 HTMLDocument的变化——11.3.4字符集属性

p292—p293

11.3.5 自定义数据属性

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能方便的知道点击来自页面中的哪个部分

可为元素添加非标准的属性，但要添加前缀data-，为元素添加其他语义信息。这些属性可随意命名，随意添加，只要以data-开头即可

可用dataset属性来访问自定义属性的值

<div id="myDiv" data-number="12345" data-name="yuan"></div>

var div = document.getElementById("myDiv");
console.log(div.dataset.number);    //12345
console.log(div.dataset.name);    //yuan

11.3.6 插入标记

1.innerHTML属性
innerHTML是双向功能，即可获取对象的内容，也可向对象中插入内容

获取对象内容

//获取ID为myDiv的对象的内容并赋值给text
var text = document.getElementById("myDiv").innerHTML;

向对象中插入内容

//向ID为myElement的对象中添加hello
document.getElementById("myElement").innerHTML("hello!");

也可在innerHTML中添加代码，则这些代码也会执行。但也有很多元素不接受这种方法，详情看书上p294-p296

2.outerHTML属性
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。
在写模式下，outerHTML会根据指定的HTML字符创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

3.insertAdjacentHTML()方法
p297

11.3.7 scrollIntroView()方法

注：全小写模式：scrollintroview()
p298

11.4.3 contains()方法

知道某个节点是不是另一个节点的后代

祖先节点.contains(后代节点);

var body = document.body;
var div = document.getElementById("myDiv");
console.log(body.contains(div));    //true