javascript中DOM扩展

143 阅读 0 评论 95 点赞

我是靠谱客的博主时尚微笑，这篇文章主要介绍javascript中DOM扩展，现在分享给大家，希望可以做个参考。

javascript中DOM扩展

一、selectors API

document.querySelector()
其中可以是标签名，类名，id名。
document.querySelectorAll()
其中也可以传入标签名，类名，id名。其最终传出的是一个HTMLCollection,是一个类数组。所以可以对其进行遍历。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//三种遍历方式
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。

复制代码

1
2
3
4
5
    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（）：判断文档是否保存焦点。
相关代码：

复制代码

1
2
3
4
5
6
      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来获取数据。

复制代码

1
2
3
4
5
6
      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需要考虑性能问题。

复制代码

1
2
3
4
5
6
7
    let ul = document.querySelector("ul");
    let values = ['张三','王五','赵四'];
    for(let value of values){
      ul.innerHTML += `<li>${value}</li>`
    }
    //这样的性能不好，因为其不断的进行取出更换，相比于此下面两种性能优化更好。

这样的性能不好，因为其不断的进行取出更换，相比于此下面两种性能优化更好。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
    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包括本身节点以及其内部的子字符串的字符集合

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <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>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!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: 取出该标签包含的全部文本，当对其进行设置的时候，会将该标签进行覆盖。