概述
javascript中DOM扩展
一、selectors API
document.querySelector()
其中可以是标签名，类名，id名。
document.querySelectorAll()
其中也可以传入标签名，类名，id名。其最终传出的是一个HTMLCollection,是一个类数组。所以可以对其进行遍历。
//三种遍历方式
for(let i = 0 ;i<div.length;i++){
div[i].className = "name";
}
// for-of进行遍历
for(let item of div){
item.className = "name";
}
// 使用item()来
for(let i =0;i<div.length;i++){
div.item(i).className = "name"
}
matches()方法:作用是判断该标签是否存在class类或者是id。
let div = document.querySelectorAll("div");
for(let i = 0 ;i<div.length;i++){
console.log(div.item(i).matches("#say"));
}
二、元素遍历
以前使用childNodes等相关的属性，返回是一个包含文本，标签，注释等数组。所以为了更好的遍历其子元素的标签数组。存在以下属性。
childElementCount： 返回子节点中的标签节点的数量。
firstElementChild ： 返回的是第一个子标签节点
lastElementChild： 返回的是最后一个子标签节点
previousElementSibling： 返回的是该节点之前的兄弟节点。
nextElementSibling: 返回的是该节点之后的兄弟节点。
三、HTML5扩展
①css类扩展
getElementsByClassName() 其中传入的是class属性值，最终得到的是一个类数组。
classList属性:得到的是该标签的全部的class属性。是一个类数组。该数组也存在一些方法。
add（value） :向该标签中新增添一个属性。
contains（value） :返回的是布尔值，判断该标签是否存在value属性。
remove（value） :删除该标签中的value属性。
toggle（value） :进行切换，如果该属性存在，则删除，如果不存在，则添加。
②、焦点管理
document.activeElement:保存的是dom中获得焦点的元素。
focus() : 将焦点设置给标签上。
document.focus（）：判断文档是否保存焦点。
相关代码：
let input = document.getElementsByTagName("input")[0];
input.focus();
console.log(document.activeElement == input);
console.log(document.hasFocus());
document.hasFocus()//表示整个文档是否获得焦点
③HTMLDocument扩展
document.readyState属性 :判断文档加载状态。
两个状态：loading和complete
document.compatMode属性：判断当前是什么渲染模式
两种模式：Css1Compat 和 BackCompat
④字符集属性 document.characterSet:这里是判断字符集属性。meta中的charset。
四、自定义数据属性
在一个标签中可以使用data-来自定义属性，当使用dataset来进行访问的时候，是一个Map类型的数据，可以使用dataset.属性名来获取属性，并且需要注意的是属性全部需要小写。如果遇到例如data-my-set需要使用dataset.mySet来获取数据。
let div = document.getElementsByTagName("div")[0];
console.log(div.dataset);
console.log(div.dataset.name);
console.log(div.dataset.age);
console.log(div.dataset.mySex);
五、插入标记
一、innerHTML属性 :可以获取innerHTML中的全部内容，并且可以识别标签
也可以设置innerHTML。
不过需要注意在设置innerHTML需要考虑性能问题。
let ul = document.querySelector("ul");
let values = ['张三','王五','赵四'];
for(let value of values){
ul.innerHTML += `<li>${value}</li>`
}
//这样的性能不好，因为其不断的进行取出更换，相比于此下面两种性能优化更好。
这样的性能不好，因为其不断的进行取出更换，相比于此下面两种性能优化更好。
let ul = document.querySelector("ul");
let values = ["张三","王五",'赵四']
let inner = "";
for(let value of values){
inner += `<li>${value}</li>`
}
ul.innerHTML = inner;
// 方法二
let ul = document.querySelector("ul");
let values = ["张三","王五",'赵四']
ul.innerHTML = values.map(value=>`<li>${value}</li>`).join("");
innerHTML中插入script标签，该标签不会别执行。
outerHTML属性 ：outerHTML包括本身节点以及其内部的子字符串的字符集合
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content">
<p>This is a</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script>
let content = document.getElementById("content");
console.log(content.outerHTML);
// outerHTML包括本身节点以及其内部的子字符串的字符集合
</script>
</body>
</html>
insertAdjacentHTML（）和insetAdjacentText（）方法：
包含以下属性：beforebegin，afterbegin,afterend,beforeend
<script>
let p = document.querySelector("p");
p.insertAdjacentHTML('beforebegin', "<p>大家好</p>"); // 将标签插入到<p>标签之前
p.insertAdjacentText('beforebegin', "<p>大家好</p>"); // 将字符串插入到<p>标签之前
p.insertAdjacentHTML("afterbegin", "<p>大家好</p>"); //将标签插入到<p>标签之后
p.insertAdjacentText("afterbegin", '大家好'); //将标签插入到<p>标签之后
p.insertAdjacentHTML("beforeend", "大家好"); //将标签插入到</p>标签之前
p.insertAdjacentText("beforeend", '大家好'); //将文本插入</p>标签之前
p.insertAdjacentHTML("afterend", "大家好"); //将标签插入到</p>标签之后
p.insertAdjacentText("afterend", '大家好'); //将文本插入到</p>标签纸后
</script>
scrollIntoView（） 方法存在于HTML元素上，可以将标签元素移动到视野的某一个区域。
属性：alignToTop:true窗口滚动后元素的顶部与视口顶部对齐
false:窗口滚动后元素的底部与视口底部对齐。
behavior :定义动画行为，smooth,auto
block :定义垂直对齐方式，start,end,center,nearest
inline :定义水平方向的对齐方式，start，center,end,nearest.
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 100px;
background: red;
position: fixed;
}
.nav{
position: fixed;
left: 10px;
top: 200px;
background: green;
}
.nav ul{
width: 60px;
}
ul li{
border: 1px solid #000;
width: 60px;
height: 30px;
text-align: center;
color: white;
cursor: pointer;
}
.main div{
height: 500px;
text-align: center;
line-height: 500px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav">
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>七</li>
<li>八</li>
</ul>
</div>
<div class="main">
<div>这里是第一页</div>
<div>这里是第二页</div>
<div>这里是第三页</div>
<div>这里是第四页</div>
<div>这里是第五页</div>
<div>这里是第六页</div>
<div>这里是第七页</div>
<div>这里是第八页</div>
</div>
<script>
let ul_li = document.querySelectorAll("li");
let div = document.querySelectorAll(".main div");
for(let i = 0;i<ul_li.length;i++){
ul_li[i].addEventListener('click',function(){
div[i].scrollIntoView({behavior:"smooth",block:"center"})
})
}
</script>
<!-- 解析：这里使用的是scrollIntoView()方法，目的就是将某一个对象移动到视野中央
其中存在参数如果使用
alignToTop参数是一个布尔值
div[i].scrollIntoView(true)，传入true表示窗口滚动后元素的顶部与视口顶部对齐
false表示窗口滚动后元素的底部与视口底部对齐
scrollIntoViewOptions是一个选项对象，behavior定义过渡动画，可选smooth和auto,
block定义垂直方向的位置，
inline定义水平方向的位置
-->
</body>
</html>
children属性：获取该标签子元素中全部的节点标签。
contains() ：判断一个节点是否包含另一个节点，如果包含返回true。
innerText :设置标签节点的文本，并且也可以取出标签节点的全部文本，是将标签去除。
outerText: 取出该标签包含的全部文本，当对其进行设置的时候，会将该标签进行覆盖。
最后
以上就是丰富紫菜为你收集整理的javascript中DOM扩展的全部内容，希望文章能够帮你解决javascript中DOM扩展所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
![DOM扩展：DOM API的进一步增强[总结篇-上]](/uploads/reation/bcimg8.png)
发表评论 取消回复