DOM

一.定义:

文档对象模型(操作 html 中标签的一些能力)

二.核心:

DOM 的核心就是 document 对象
- document对象是JS内置的一个对象, 里边存储着专门用来操作元素的各种方法
- DOM: 页面中的标签, 通过 JS 获取到以后, 就把这个对象叫做DOM对象(DOM节点)

三.获取元素

1.获取非常规元素
- document.documentElement -> html标签
  - 语法console.log(document.documentElement)
- document.head -> body标签
  - 语法:console.log(document.head)
- document.body -> body标签
  - 语法:console.log(document.body)
2.获取常规元素
- 2.1 通过 ID 名获取标签
  - 语法: document.getElementById('ID名')
```
    console.log(document.getElementById('ID'))
```
- 2.2 通过class名获取标签
  - 语法: document.getElementsByClassName('class名')
  - 注意:因为页面中可能会有多个元素的 cLass相同，所以获取到的是一组元素
    
    获取到后会把元素放在一个长得很像数组一样的﹑数据结构内，但它并不是数组我们管这种数据结构叫做伪数组(长得很像数组，也是通过索引排列，但是没有数组的方法)
```
    console.log(document.getElementsByClassName('cla')[1]) //class名可以是多个,用下标来选择
```
- 2.3 通过标签名获取
  - 语法: document.getElementsByTagName('标签名')
  - 注意:获取到的也是一个长得很像数组一样的数据结构，其实就是获取到了一个伪数组想要准确的获取到标签元素，我们需要通过索引来帮助我们拿到
```
    console.log(document.getElementsByTagName('div')[0]) //标签名可以是多个,用下标来选择
```
- 2.4 按照选择器的形式来获取元素
  - 2.4.1 querySelector
    - 语法:document.querySelector ('选择器')
    - 注意:这个方法只能获取到一个元素，就是满足条件的第一个元素
```
    var box1 = document.querySelector('.cla')
    console.log(box1)
    var box3 = document.querySelector('div')
    console.log(box3)
```
  - 2.4.2 querySelectorAll
    - 语法:document.querySelectorAll ('选择器')
    - 注意:这个方法只能获取到一个元素，就是将所有满足条件的元素都获取到
```
    var box2 = document.querySelectorAll('.cla')
    console.log(box2)
```

四.获取元素属性

<div class="box" a="QF001"></div>

var oDiv = document.querySelector('.box')       // 获取元素

1.获取元素的某些属性
- 语法:元素.getAttribute('要查询的属性名')
- 返回值:查询到属性时返回对应的属性值，没有查询到时直接返回null
```
    console.log(oDiv.getAttribute('a'))         // QF001
    console.log(oDiv.getAttribute('b'))     // 没有 b 这个属性,所以是null
```

2.修改元素的某些属性

语法:元素.setAttribute('对应的属性名','对应的属性值')
注意:元素没有对应的属性名,那么相当于的是新增一个属性

    oDiv.setAttribute('class','new_box') // 将属性 class 的属性值修改为new_box      
    oDiv.setAttribute('b','66666')      // 没有b这个属性 所以就会新增一个b属性

3.删除元素的某些属性

语法:元素.removeAttribute('要删除的属性名')

        oDiv.removeAttribute('class')       // 删除 class 属性   
        oDiv.removeAttribute('a')           // 删除 a 属性

五.h5自定义属性

每一个元素/DOM 节点天生自带一个属性，叫做dataset，是一个类似对象的数据结构

"date-" ------> 表示该属性是一个自定义属性
"date-" ------> 后边的内容才是属性名 ->当前案例 a 是属性名,不是data-a

"=" ------> 后边的内容是属性值

<div data-a ="100" ></div>

var oDiv = document.querySelector('div')     // 获取元素

1.获取 h5 自定义属性

    console.log(oDiv.dataset.a)         // 100

2.修改 h5 自定义属性

    oDiv.dataset.a = 6666               // 标签中有这个自定义展性，所以是修改
    oDiv.dataset.age = 18               // 标签中没有这个自定义展性，所以是新增

3.删除

    delete oDiv.dataset.a               // 删除 a 属性

    </script>
</body>

六.操作属性

作用:获取到元素以后，可以直接操作DOM的属性，然后直接把效果展示在页面

    <div id="box">
        <p>
            <span>早上好</span>
        </p>
    </div>           
    var oDiv = document.querySelector('#box')     // 获取标签

1.innerHTML
- 语法:元素.innerHTML
- 作用:
 
 获取元素内部的 HTML 的结构以及文本也可以给这个属性重新赋值,达到修改页面的效果
 - 1.1 获取 div 内部HTML结构
```
 console.log(oDiv.innerHTML); // 早上好
```
 - 1.2 重新赋值,达到修改页面的效果
```
 oDiv.innerHTML = '早上好--这个文本是通过js来设置的'
```
2.innerText
- 语法: 元素.innerText
- 作用:
 
 获取元素内部的文本（只能获取到文本，获取不到htmL标签) 也可以给这个属性重新赋值,达到修改页面的效果
 - 2.1 获取 div 内部文本
```
 console.log(oDiv.innerText); // 早上好
```
 - 2.2 重新赋值,达到修改页面的效果
```
 oDiv.innerText = '早上好--这个文本是通过js来设置的'
```

七.获取元素样式(style)

1.获取行内样式的

语法:元素.style.某个元素

注意:

也可以给这个语法重新赋值，达到修改元素样式的效果(修改的是行内的样式)

这种语法获取到的元素样式,只能获取到行内样式

<div class="box" style="width: 200px;"></div>
var oDiv = document.querySelector('.box')           // 获取元素

1.获取元素样式

    console.log(oDiv.style.width)
    console.log(oDiv.style['background-color']) // 中括号语法
    console.log(oDiv.style.backgroundColor)     // 驼峰命名法

2.设置元素样式

    oDiv.style.width = 666 + 'px'           // 修改的是行内样式
    oDiv.style.backgroundColor = 'green'    // 修改的是行内样式

2.获取非行内样式
- 语法: window.getComputedStyle(元素).要查询的css属性
- 注意:
  - 1.这种方式获取到的属性是只读的(能获取到，但是不允许修改)
  - 2.这种方法也可以获取到行内样式,但是一般用来获取非行内样式
```
    console.log(window.getComputedStyle(oDiv).width)        // 获取非行内样式的宽度
    console.log(window.getComputedStyle(oDiv).backgroundColor) // 获取非行内样式的背景色
```

八.获取元素类名(class)

    <div class="box new_box"></div>
    var oDiv = document.querySelector('.box')       // 获取元素

1.className
- 作用: 用来操作元素的类名
- 语法: 元素.className
- 注意: 也可以给他重新赋值来达到修改元素的类名
```
console.log(oDiv.className)
oDiv.className = 'qwer'     // 会把class里的内容标全部修改为qwer
```

2.classList(常用)

2.1 获取
```
console.log(oDiv.classList)
```
2.2 新增
```
oDiv.classList.add('666')
```
2.3 删除
```
oDiv.classList.remove('new_box')
```

(JS基础)DOM元素和属性

DOM

一.定义:

二.核心:

三.获取元素

四.获取元素属性

五.h5自定义属性

六.操作属性

七.获取元素样式(style)

八.获取元素类名(class)