红宝书 第11章整理——DOM扩展

这章讲的是一些新兴的，或者刚刚被纳入规范的一些，操作DOM的属性方法

1、选择符API

通过CSS选择符（比如id为#，class为.）来直接在js中选择DOM元素。jQuery的核心就是这个

① querySelector()

接受一个css选择符，返回找到的与之匹配的，第一个元素。

var a = document.querySelector("body")    //选body元素

var a  = document.querySelector("#my")     // 选ID名为my的

var a = document.querySelector(".my")       // 选class名为my的第一个元素

② querySelectorAll()

与前一个一样，但就是返回所有，比如class名，会返回一个nodelist

2、HTML5中DOM的扩展

①类的扩展

1、getElementByClassName()

接受的参数可以有多个，就是返回所有它们的元素，nodelist形式返回

2、classList()

当一个元素同时属于多个class时，可以用这个，可以配合它的方法

div.classList.add("fun")      //为div元素添加fun的类

还有查询contains，remove删除，toggle替换

②自定义数据属性

在html5中，可以添加自定义的属性，在标签中写的时候要加data-前缀，在js中访问时，要通过dataset.来访问,此时去掉前缀

<div data-app="aaa" data-my="bbb">

div.dataset.app

div.dataset.my

③ 插入标记

纳入规范的有：innerHTML，outerHTML

innerHTML:

会返回调用节点内部的所有子节点，包括元素注释和文本节点，不要局限于只写text，还可以直接写innerHTML=“”<p>...</p><div></div>“”之类的

outerHTML:

比inner的多一个返回自己本身，所以用outer进行写入时，会覆盖之前的那个节点

被替换和被覆盖的元素如果之前有绑定函数，那么函数不会跟着消失，而是成为孤儿占在内存中，所有可能会导致内存占用问题

__________________________________________________

还没有纳入规范的有：innerText，outerText

区别：就是返回纯纯的text文本节点，其他全不要，所以可以用来筛选过滤。inner与outer的区别同上。暂时没有纳入规范，就是可能有点浏览器不支持