5.2 DOM扩展

选择器Api

querySelector() 接受一个Css选择符，返回第一个匹配的元素

querySelectorAll() 接受一个Css选择符,返回一个NodeList实例

Html5

getElementsByClassName() 接受一个参数，包含一或多个类名的字符串，返回带有指定类的所有元素的Nodelist

只有位于调用元素子树中的元素才会返回，在document对象上调用会返回所有与类名匹配的所有元素，在元素上调用只会返回后代元素中匹配的元素。

classList属性

add()

contains()

remove()

toggle()

//删除hide类

div.classList.remove("hide");

//添加current类

div.classList.add("current")

//判断存在toggle类

div.classList.toggle("toggle")

插入标记

innerHTML返回与调用属性的所有子节点对应的HTML标记。

outerHTML返回调用它的元素与所有子节点的HTML标记

insertAdjacentHTML()接受两个参数，插入位置与要插入的HTML文本

//作为前一个同辈元素插入

div.insertAdjacentHTML("beforebegin","<p>Linshuizhaoying</p>")

//作为第一个子元素插入

div.insertAdjacentHTML("afterbegin","<p>Linshuizhaoying</p>")
//作为最后一个子元素插入

div.insertAdjacentHTML("beforeend","<p>Linshuizhaoying</p>")
//作为后一个同辈元素插入

div.insertAdjacentHTML("afterend","<p>Linshuizhaoying</p>")

滚动

scrollIntoView() 通过滚动浏览器窗口或某个容器元素，调用元素可以出现在视口中。

//让元素可见
document.forms[0].scrollIntoView();

scrollIntoViewIfNeeded(alignCenter)只在当前元素不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。设置alignCenter为true 尽量将元素现在在视口中部。

scrollByLines(lineCount) 将元素的内容滚动指定行高

scrollByPages(pageCount) 将元素的内容滚动指定页面高度