DOM扩展的那些事儿

来源：互联网发布：五邑大学网络教学平台编辑：程序博客网时间：2024/06/06 07:34

前言：关于DOM的扩展，之前自己也接触了一些，但是没有系统的去看，这次有机会系统的学习JavaScript，所以就把这些知识好好的总结一下。

1、选择符的扩展

在没有扩展之前，我们在进行元素选择之前，使用最广泛的就是

document.getElementById()

但是在扩展以后，我们在进行元素选择的时候方便了很多，关于选择符一共扩展了三个方法

document.querySelector()document.querySelectorAll()document.getElementsByClassName()//看书才知道这也是DOM扩展的内容（尴尬）

自己平时用的最多的就是下面这样

document.querySelector("#content");或者document.querySelector(".container");

但是关于这个方法的魅力远远不只是这个简单，我们在css中可以怎么选择元素，这里就可以这样选择，什么意思呢，通过下面的例子来说明

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title></head><body>    <ul class="ul">        <li>1</li>        <li>2</li>        <li>3</li>    </ul>    <script>        window.onload = function() {            var oUl = document.querySelector(".ul");            var oLi = oUl.querySelector("li:first-child");            console.log(oLi);//结果为<li>1</li>        }    </script></body></html>

感受到这个方法的强大了吧，关于CSS的选择符，自己之前总结过一篇文章，感兴趣的伙伴可以看看CSS选择器总结

关于querySelectorAll()也是一样的，只是返回的结果是NodeList。

对于getElementsByClassName()我们可以传入多个class名称，返回结果如果是多个也是NodeList

2、元素遍历的扩展

不知道还记不记得我们之前在遍历元素的时候，经常使用nextSibling，firstChild。我们经常要考虑到文本节点，弄得很烦恼。现在终于有了一些方法不用考虑到文本节点了，只是考虑文档节点，看看下面例子就明白了。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title></head><body>    <ul class="ul">        <li>1</li>        <li>2</li>        <li>3</li>    </ul>    <script>        window.onload = function() {            var oUl = document.querySelector(".ul");            // 获取子元素的个数            console.log(oUl.childElementCount);//结果为3            // 返回第一个子元素            console.log(oUl.firstElementChild);            // 返回最后一个元素            console.log(oUl.lastElementChild);            // 获取同辈的下一个元素            console.log(oUl.firstElementChild.nextElementSibling);            // 获取同辈的上一个元素            console.log(oUl.lastElementChild.previousElementSibling);        }    </script></body></html>

2、了不起的classList属性

关于这个属性的出现，真得好处多多啊，进行类名操作的时候只需要调用一个属性即可。下面进行简单对比
正常情况下，我们要增加一个元素的类名是下面这样的

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title>    <style>        .red-color {            color: red;        }        .bg-gray {            background-color: gray;        }        .center {            text-align: center;        }    </style></head><body>    <ul class="red-color bg-gray">        xiaoD    </ul>    <script>        window.onload = function() {            var oUl = document.getElementsByTagName("ul")[0];            var classNames = oUl.className.split(/\s+/);            classNames.splice(0,0,'center');            oUl.className = classNames.join(" ");        }    </script></body></html>

但是我们又了classList属性的时候，我们就可以对上面的操作秒杀。classList主要有四个方法

add 如果已经存在值了，就不会增加，如果不存在就增加contains 判断是否存在该值remove 删除值toggle 如果存在就删除，如果不存在就增加，就是逆向而行

具体例子

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title>    <style>        .red-color {            color: red;        }        .bg-gray {            background-color: gray;        }        .center {            text-align: center;        }    </style></head><body>    <ul class="red-color bg-gray">        xiaoD    </ul>    <script>        window.onload = function() {            var oUl = document.getElementsByTagName("ul")[0];            oUl.classList.add('center');            oUl.classList.remove('bg-gray');            console.log(oUl.classList.contains('red-color'));//结果为true            oUl.classList.toggle("bg-gray");        }    </script></body></html>

3、焦点管理

通过document.activeElement获取当前或者焦点的元素
通过document.hasFocus()判断文档是否获取到了焦点，通过该方法我们可以知道用户是不是正在和页面进行交互，因为只要用户的鼠标在document中，返回的值都是true

4、readyState

通过document.readyState判断页面是否已经加载完成，如果加载完成则为complete

5、outerHTML

我们都知道innerHTML，但是这里却出现了一个outerHTML，先看一下下面的例子，在进行解释

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title>    <style>        p.red {            color: red;        }    </style></head><body>    <div id="div1"></div>    <script>        window.onload = function() {            var oDiv = document.getElementById("div1");            oDiv.outerHTML = "<p class='red'>123</p>";        }    </script></body></html>

我们通过上面的操作，再看elment中的元素，发现div不见了，只有一个p标签。对，你没有看多，这就是outerHTML，其实质就是

var p = document.createElement("p");p.appendChild(document.createTextNode("welcome"));oDiv.parentNode.replaceChild(p, oDiv);

6、insertAdjacentHTML

这个方法有两个参数，使用方法如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title></head><body>    <div id="div1">        <p class="list">1</p>    </div>    <script>        window.onload = function() {            var oDiv = document.querySelector("#div1");            // 作为同辈元素插入在oDiv之前            oDiv.insertAdjacentHTML("beforebegin", "<p>0</p>");            // 作为同辈元素插入在oDiv之后            oDiv.insertAdjacentHTML("afterend", "<p>2</p>");            // 作为第一个子元素插入            oDiv.insertAdjacentHTML("afterbegin", "<p>1.1</p>");            // 作为最后一个子元素插入            oDiv.insertAdjacentHTML("beforeend", "<p>1.2</p>");        }    </script></body></html>

我们来看看结构图就清楚了
这里写图片描述

7、scrollIntoView

可以取值为true和false。如果是true则是容器的上边框和页面的顶部对齐，如果是false则是容器的下边框和页面的底部对齐，但是这是有条件的，就是当页面的可视区高度小于容器的高度。如果容器的可视区的高度大于容器的高度，那么不管设置为false，还是true都是和页面的底部对齐。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>welcome</title>    <style>        div {            width: 200px;            height: 100px;            margin-top: 3000px;            border: 1px solid red;        }        .content {            width: 300px;            height: 2000px;        }    </style></head><body>    <button id="btn">向上</button>    <div class="content">welcome</div>    <script>        window.onload = function() {            var oBtn = document.getElementById("btn");            var oContent = document.querySelector(".content");            oBtn.onclick = function() {                oContent.scrollIntoView(true);            }        }    </script></body></html>

（完，写于2017/11/14 0:46）

阅读全文

0 0