DOM扩展

最新推荐文章于 2022-03-24 17:51:24 发布

原创最新推荐文章于 2022-03-24 17:51:24 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM扩展

JS类专栏收录该内容

202 篇文章

订阅专栏

一、querySelector();

querySelector( )方法接收一个css选择器，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null；

var oUl = document.querySelector("ul");

console.log(oUl); //返回ul

var oLi = document.querySelector("li");

console.log(oLi) //返回第一个li元素；

二、querySelectorAll()

querySelectorAll()接收的参数与querySelector()接收的一样，但是返回的却是所有匹配的元素，是一个NodeList实例；不管找到多少匹配的元素，返回的都是一个集合；

var oUl = document.querySelectorAll("ul");

console.log(oUl); //返回[ul]

var oLi = document.querySelectorAll("li");

console.log(oLi) //返回[li, li, li]

要取得NodeList中的每一个元素，可以使用item()或者用方括号也可以；

console.log(oLi[2]);

console.log(oLi.item(1));

同样与querySelector()一样，如果传入的参数不支持的选择符或者选择符中有语法错误，querySelectorAll()会抛出错误；

三、元素遍历

对于元素间的空格，ie9及之前不会返回文本节点，其他浏览器都会返回文本节点；这样就导致了使用childNodes和firstChild等属性时行为不一致；为了弥补这些差异，同时又保持DOM的规范不变，新定义了一组属性：

childElementCount：返回元素的子节点（不包括文本节点）

firstElementChild:返回元素的第一个子节点，

lastElementChild：返回元素的最后一个子节点；

previousElementSibling：上一个兄弟元素；

nextElementSibling :下一个兄弟元素；

例子：

var oUl = document.querySelector("ul");

var Child = document.querySelector("#child")

console.log(oUl.childNodes);//[text, li, text, li, text, li, text]

console.log(oUl.childElementCount); //返回子元素的（不包括文本节点）个数；

console.log(oUl.firstElementChild) //返回第一个元素节点；

console.log(oUl.lastElementChild) //返回最后一个元素节点；

console.log(Child.previousElementSibling); //返回他的上一个兄弟元素；

console.log(Child.nextElementSibling) //返回它的下一个兄弟元素；

四、html5

与类相关的扩充；

document.getElementsByClassName() 接收一个字符串，即包含一个或者多个类名的字符串；返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要；

var oP = document.getElementsByClassName("p");

console.log(oP);//[p.p]

var oDiv = document.getElementsByClassName("two one");

console.log(oDiv); //[div.one.two]

classList html5新增的操作类名的方式，可以让操作更简单也更安全，用法：

add(value):将给定的类名添加到元素中，如果有就不添加了；

contains(value)：类表中是否存在给定的值，如果存在返回true，如果不存在返回false；

remove(value):从列表中删除给定的字符串；

toggle(value):如果列表中已经存在的值，删除它；如果列表中没有的值，添加它；

例子：

var oP = document.getElementsByClassName("p")[0];

// oP.classList.add("active");

// oP.classList.remove("active");

oP.classList.toggle("active");

console.log(oP);

五、焦点管理

document.activeElement 属性，始终引用DOM中当前获得焦点的元素。元素获得焦点的方式有页面加载、用户输入、和在代码中调用focus()方法；

文档刚刚加载完成时保存的是document.body元素的引用；文档加载期间document.activeElement的值为null；

hasFocus() 确定文档是否获得了焦点；通过检测文档是否获得了焦点，可以知道用户是不是正在与页面进行交互；3.
最终要的功能：提高web的无障碍性；

六、HTMLDocument的变化；

readyState属性有两个可能的值：

loading 正在加载文档；

complete 已经加载问文档；

用法如下：

if(document.readyState == "loading"){

alert("正在加载")

}

window.onload = function(){

if(document.readyState == "complete"){ //文档必须加载完成时，才能执行；

alert("已经加载完成")

}

兼容模式：compatMode 在标准模式下 document.compatMode的值等于CSS1Compat 混杂模式下等于BackCompat

if(document.compatMode == "CSS1Compat"){

alert("我是标准模式")

}·

document.head 对于不兼容此方法的浏览器可以使用如下方法：

var head = document.head || document.getElementsByTagName("head")[0];

七、自定义属性；

可以为元素添加非标准属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息；访问的时候可以用getAttribure()访问；

<body>

<p class="p" data-time = "dfsdaf">我是一个p元素</p>

<div class="one two">我是一个div元素</div>

</body>

var oP = document.getElementsByTagName("p")[0];

console.log(oP.getAttribute("data-time"))

</script>

八、插入标记；

innerHTML

在读模式下：innerHTML返回与调用语速的所有子节点（包括元素、注释、文本节点）对应的html标记；

在写模式下：innerHTML根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点；

使用innerHTML插入script标签，并不会执行其中的脚本；

outerHTML

在读取模式下：调用它的元素及所有子节点的html标签；

在写模式下：outerHTML会根据指定的html字符串创建新的DOM子树，然后用这个新的DOM子树完全替换调用的元素，而不只是替换调用outerHTML的元素的子节点；

<body>

</ul>

</body>

var oUl = document.getElementById("box");

oUl.outerHTML = "<li>我是替换的</li>";

//将ul替换为：<li>我是替换的</li>

</script>

八、专有扩展

children 只包含元素中同样还是元素的子节点，除此之外children和childNodes没有区别，在元素只包含子节点时，children不包含文本节点，childNodes包含文本节点；

<body>

<li>fdsafd</li>

</ul>

</body>

var one = document.getElementById("one");

var two = document.getElementById("two");

console.log(one.children) // 不包含文本节点；

console.log(one.childNodes) //包含文本节点；

console.log(two.children); //[]

console.log(two.childNodes);//[]

</script>

contains() 知道某个节点是不是另一个节点的后代；调用contains() 方法应该是祖先节点；这个参数要接收一个参数，即要检测的后代节点；如果被检测的节点是后代节点，则返回true，如果不包含，则返回false；

var btn = document.documentElement.contains(document.body)

console.log(btn);//true

innerText

<body>

<li>fdsafd</li>

</ul>

</body>

var one = document.getElementById("one");

console.log(one.innerText); //fdsafd fdsafd

</script>

outerText 在读取模式下与innerText是一样的，但是在写的模式下不同，不仅会替换子节点，而且还会替换调用它的整个元素；