js-DOM

通过标签名获取
- document.getElementsByTagName('标签名')
- element.getElementsByTagName('标签名')
- 注：只有标签名获取可以使用元素调用
通过类名获取
- document.getElementsByClassName('类名')
通过id名获取
- document.getElementById('id名')
通过属性名获取
- document.getElementsByName('name属性值')
- 常用于form表单

2)特点

通过标签名、类名、name属性值获取的返回值为带有指定标签名/类名/name属性名的元素对象的集合，以伪数组的形式存储；
- 若是没有，返回一个空数组，
- 返回1个元素也是数组；
- 若是获取某个元素通过下标获取即可
通过id名获取元素返回值为带有指定id名的单个元素对象(id名在文档中具有唯一性)
- 若有带相同的id名的元素，不报错；但仅能获取第一个带有指定id名的元素

3)举例说明

 <body>
    <div>111</div>
    <div>112</div>
    <div>113</div>
    <div>114</div>
    <div id="target1">115</div>
    <div>116</div>
    <div>117</div>
    <div class="target2">118</div>
    <div>119</div>
    <div class="target3 target2">1110</div>
    <input type="text" name="input" />
    <script>
      // 1.通过标签名获取
      console.log(document.getElementsByTagName('div')[0].innerHTML) //111
      // 2.通过类名获取
      console.log(document.getElementsByClassName('target2')[1].innerHTML) // 1110
      // 3.通过id名获取
      console.log(document.getElementById('target1').innerHTML) // 115
      // 4.通过属性名获取
      console.log(document.getElementsByName('input')) // input元素
    </script>
  </body>

[2]query方式(通过选择器获取)获取⭐️⭐️⭐️

1)语法

获取符合该选择的某个元素
- document.querySelector('选择器')
- 返回符合条件的第一个元素；
获取符合该选择的全部元素
- document.querySelectorAll('选择器‘)
- 返回值是一个列表，以伪数组的形式进行存储，若是找不到符合条件的元素，则返回一个空数组；

2)举例说明

 <body>
    <div>111</div>
    <div>112</div>
    <div>113</div>
    <div>114</div>
    <div id="target1">115</div>
    <div>116</div>
    <div>117</div>
    <div class="target2">118</div>
    <div>119</div>
    <div class="target3 target2">1110</div>
    <input type="text" name="input" />
    <script>
      console.log(document.querySelector('.target2').innerHTML) //118
      console.log(document.querySelectorAll('.target2')[1].innerHTML); // 1110
    </script>
  </body>

[3]扩展什么叫做伪数组

js_数组_数组/伪数组概论_乖女子@@@的博客-CSDN博客_set伪数组

2.对元素属性进行操作

[1]使用点语法或[]对元素属性进行操作

元素本质是一个对象，元素的属性就是对象的属性，所以可以使用点语法获取[]来获取/设置元素属性；

[1]获取属性

element.属性名

element[属性名] // 可以解析变量名中的字符串

[2]设置/修改

element.属性名 = 值

element[属性名] = 值 // 可以解析变量名中的字符串

[3]删除

element.属性名=''
element[变量名]=''
element['变量名']=''

特点

[1]使用点语法或[]操作元素属性时类名为className;
[2]通过点语法或[]设置自定义属性并不会显示在标签中(仅自定义属性)(通过控制台观察不到)，但是可以使用原语法去获取(使用点语法.[]设置的仅能通过点语法.[]获取通过getAttribute获取不到)也可使用console.dir(element)查看。
[3]过点语法或[]删除元素属性仅仅是删除了元素的属性值，属性名依旧存在(删除不完全)

[3]举例说明

  <body>
    <div id="box">222</div>
    <script>
      const box = document.querySelector('#box')
      box.dataName = 111
      // 通过控制台观察元素为<div id="box">222</div>并没有显示我们涉资的自定义属性
      const aaa = 'dataName'
      // 点语法和[]本质是同一种语法
      console.log(box[aaa]) // 111
      // 使用点语法.[]设置的仅能通过点语法.[]获取通过getAttribute获取不到
      console.log(box.getAttribute('dataName')) // null
      // console.dir可以看到当前对象的所有属性(包含自定义属性)
      console.dir(box)
    </script>
  </body>

[2]通过Attribute方法对元素属性进行操作⭐️⭐️⭐️

attribute方法是用来对元素属性进行操作的

[1]获取元素属性

element.getAttribute('属性名')

[2]设置/修改元素属性

element.setAttribute('属性名'，’属性值‘)

[3]删除元素属性

element.removeAttribute('属性名')

特点

使用Attribute操作属性时类名为class;
通过setAttrbute设置的任何元素属性(包括自定义属性)会显示在行内(通过控制台可见)，通过setAttribute设置的自定义属性只能通过getAttribute去获取(通过点语法获取不到)
删除属性时将属性名与属性值一起删除

[3]案例：多类名

如图，当点击哪个按钮，添加哪个样式再次点击时取消该样式！

<style>
  .style1{
    background-color: aqua;
  }
  .style2{
    color: brown;
  }
  .style3{
    font-size: 14;
  }
  .style4{
    border-radius: 50%;
  }
</style>

<div id="titletext">我是一个粉刷匠 粉刷本领强</div>
<div id="btn">
  <button style-id="style1">背景颜色</button>
  <button style-id="style2">文本颜色</button>
  <button style-id="style3">字体大小</button>
  <button style-id="style4">是否为圆</button>
</div>

const btn = document.querySelector('#btn')
// 给按钮的父盒子设置点击事件
btn.onclick = function(e){
  const item = e.target
  const styleId = item.getAttribute('style-id')
  const box = document.querySelector('#titletext')
  const classValue = box.getAttribute('class') ? box.getAttribute('class') : ''
  if (classValue.indexOf(styleId) !== -1) {
      box.setAttribute('class', classValue.split(` ${styleId}`).join(''))
    } else{
      box.className += ` ${styleId}`
    }
}

3.对元素样式进行操作(属性)

注：js中样式属性名若是带有-，全部变为驼峰命名；

[1]通过点语法对元素样式进行操作

元素本质就是一个对象，所以可以使用点语法来设置元素的样式属性

[1]获取样式

element.style.属性名

[2]设置/修改样式

element.style.属性名=’值‘

特点：1)语法：

通过点语法设置/修改的样式属于行内样式，权重比较高！
通过点语法获取样式只能获取行内样式，无法获取嵌入式或者链接式样式,获取嵌入式或者外部样式没有任何返回值！

[2]通过getComputedStyle获取元素样式

1)语法：

window.getComputedStyle(元素).属性名
window.getComputedStyle(元素)[’属性名‘]
window.getComputedStyle(元素)[变量名]

2)特点：任何位置的样式都可以正常获取(嵌入式，行内，链接式)；

若是获取宽高带单位！

3)举例说明

<style>
      #box {
        width: 200px;
        height: 200px;
      }
      .bgcolor {
        background-color: red;
      }
      .textColor {
        color: skyblue;
      }
      .fontsize {
        font-size: 22px;
      }
      .radius {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="box" class="bgcolor textColor fontsize radius ">
      我是一个粉刷匠，粉刷本领强
    </div>
    <hr />
    <script>
      let box = document.getElementById('box')
      let cla = document.getElementById('cla')
      console.log(box.style.backgroundColor) // 只能获取行内样式，获取嵌入式返回值为空
      console.log(window.getComputedStyle(box)['backgroundColor']) //rgb(255, 0, 0)
    </script>

[3]offset家族

offset家族是一组用于获取元素尺寸和位置的重要属性

1.获取带有定位的最近的父级元素，若是没有这样的父元素则返回body

element.offsetParent

2.通过offset家族获取元素距离最近的具有定位的父元素的距离=>返回值包含自身margin

element.offsetTop
element.offsetLeft

3.获取元素的宽高=>返回的宽高为content+padding+border

element.offsetWidth
element.offsetHeight

应用-获取元素宽度

如上图存在一列广告投放账户列表展示，广告投放账户数量不确定；

希望当一列展示不开的时候就显示省略号并在右侧提示共XX个账户；

实现
- [1]给展示盒子设置max-width(用于设置css样式)；
- [2]进入页面的时候获取盒子宽度，若是大于等于max-width，表示文本内容已经超过最大宽度，则显示右侧提示信息；
- [3]省略号使用css控制；

& .info{
        height: 20px;
        max-width: 428px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

created(){
    if(document.getElementById('product').offsetWidth>=428){
            // 超过了，对数据处理，展示共XXX账户数据文本
          }else{
            // 没有超过，不做处理
          }
 }

[4]client家族

1.获取元素的宽高 => 返回值为content+padding(不包含滚动条距离)

element.clientWidth
element.clientHeight

2.获取元素边框border值

element.clientTop
element.clientLeft

[5]scroll家族

1.获取元素的宽高 => content+padding(包含滚动条)

element.scrollWidth
element.scrollHeight

2.获取元素的滚动距离 => 表示元素被水平或者垂直滚动过的距离

element.scrollTop
element.scrollLeft

3.获取页面的滚动举例(*)

兼容方案

- 获取页面垂直方向上的滚动距离

let y=document.body.scrollTop || dcoument.documentElement.scrollTop || window.pageYOffset;

- 获取页面水平方向上的滚动距离

 let x=document.body.scrollLeft || document.documentElement.scrollLeft || window,pageXOffset;

[6]js引入css样式的方法

// 1)创建link标签
let linkBox=document.createChind('link')
// 2)添加href属性，属性值为引入的css的路经
linkBox.href='路经'

4.对元素进行操作(方法)

[1]克隆元素

概念：克隆元素即复制元素；

语法
- element.cloneNode();
- 复制谁谁调用
参数
- true---深克隆
- false(默认)---浅克隆
返回值
- 若是深克隆---返回值为一个相同的元素，包含元素内容
- 若是浅克隆---返回值为一个相同的元素，不包含元素内容
注意
- 克隆时注意id不能重复
- 解决：可加一个编号与id进行字符串拼接；
  - 若克隆元素带有id属性
    1）let index=0;
    2)每克隆一次index++；
    将克隆元素id名和index做一个字符串拼接

[2]创建元素

语法
- document.createElement('标签名');
- 无中生有只有document可以调用
返回值
- 一个空白(不带内容)的元素
- 注：若想添加文字---element.innerText=''即可
注：创建的元素不会直接显示在界面上，还需要调用其他方法将该元素添加到界面上

[3]追加元素

概念：将克隆或者创造的元素添加到某个元素中
语法
- 父元素.appendChild(元素名)
- 追击到谁身上就用谁来调用
- 注：元素名不加引号
注：相当于剪切(追加后此元素原来位置没有元素了)

[4]删除元素

概念：删除某个指定元素，需要通过父元素来调用；
语法
- 父元素.removeChild(删除元素名)；
- 注：元素名不加引号
注：获取的元素只是存在一个伪数组中--伪数组去不存在数组的方法，所以不能通过shift/pop/splice删除元素

[5]插入元素

概念：通过父元素在某个元素前面添加新元素
语法：
- 父元素.insertBefore(newBox,tag);
- 将newBox添加到tag元素之前
- 追加与插入区别：
  - 追加是追加到父元素里面作为最后一个元素；
  - 插入是追加到父元素里面作为tag元素的前面一个元素；

[6]替换元素

概念：通过父元素将某元素替换成新的元素
语法：父元素.replaceChild(新元素，旧元素)

总结：

对元素得操作都是方法！
调用
- 克隆---克隆谁谁调用；
- 创建---无中生有只有document(文档)可以调用；
- 追加---追击到谁身上就用谁来调用(父元素调用)
- 删除---父元素调用
- 插入---父元素调用

5.事件

js-DOM-事件_乖女子@@@的博客-CSDN博客

6.节点

1.定义

页面中的所有内容均可看作一个节点;

可以理解为是文档树上的内容；

2.节点分类

文档节点：document---顶级节点
- 获取：不需要获取直接可以使用document
元素节点：element
- 获取：通过获取元素的方式获取元素节点
  - eg:document.getElementsByTagName('标签名')
属性节点：attribute
- 获取：元素.attributes获取某元素的全部的属性存放在伪数组里，通过下标获取想要获取的属性节点
文本节点：text
- 获取：先通过element.childNodes获得某元素的所有节点，通过下标获取文本节点
注释节点：comment
- 获取：先通过element.childNodes获得某元素的所有节点，通过下标获取文本节点

每种节点的三大特性

节点名称：nodeName
- 节点.nodeName
  - document文档节点：#document；
  - element元素节点：大写的标签名；
  - attribute属性节点：属性名；
  - text文本节点：#text；
  - comment注释节点：#comment；
节点类型：nodeType
- 节点.nodeType
  - document文档节点：9；
  - element元素节点：1；
  - attribute属性节点：2；
  - text文本节点：3；
  - comment注释节点：8；
节点内容
- 节点.nodeValue
  - document文档节点：null；
  - element元素节点：null；
  - attribute属性节点：属性值；
  - text文本节点：文本；
  - comment注释节点：注释；

3.获取节点

获取所有子节点

语法：element.childNodes;
结果：返回值为一个伪数组，存放该元素所有的子节点
注：回车也算是一个文本节点

举例说明

 <div>

      <p>这是一个寂寞的天</p>

      <p>这是一个寂寞的天</p>
      
      <p>这是一个寂寞的天</p>
      下这有些伤心的雨
      <!-- 啦啦啦 -->
    </div>
    <script>
      let box = document.getElementsByTagName('div')[0]
      let arr = box.childNodes
      console.log(arr.length) //9
      let arr2 = box.children
      console.log(arr2.length)// 3
    </script>