[TOC]

文档对象模型 (Document Object Model, DOM) 是 HTML的编程接口
用对象和HTML结构一一映射，通过修改对象达到修改HTML节点的目的

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

1. document
包含文档基本信息
- document.head
- document.body
- document.title
- document.location
  - document.location.href 获取当前页面完整的URL
  - document.location.hash #
  - docuemnt.location.search ？
  - document.location.reload() 刷新当前页面
  - document.location.assign(‘https://wwww.baidu.com‘) 页面跳转
    2. element
DOM元素对象
- node.nodeName：元素标签名，还有个类似的tagName
- node.nodeType：元素类型(返回一个数字)
- node.className：类名
- node.id：元素id
- node.children：子元素列表（HTMLCollection）
- node.childNodes：子元素列表（NodeList）
  - 把换行，空格当作文本对象处理
- node.firstElementChild：第一个子元素
- node.lastElementhild：最后一个子元素
- node.nextElementSibling：下一个兄弟元素
- node.previousElementSibling：上一个兄弟元素
- node.parentNode：父元素
  3. 获取元素
```
//ES3写法，不推荐
document.getElementById('id')             //Element
document.getElementsByClassName('class')  //HTMLCollection
document.getElementsByTagName('p')       //HTMLCollection
document.getElementsByName('username')   //NodeList
//ES5写法，推荐
document.querySelector('.box') //Element
document.querySelectorAll('.box') //NodeList
```
注意
- getElementsByClassName获取的是一个类数组对象，不是一个真正的数组
- 不要少写getElementsByClassName中的s
- querySelector的参数是一个任意合法的CSS3选择器
- querySelectorAll的到的是一个类数组对象, 不是一个真正的数组
- NodeList和HTMLCollection的差异是前者有forEach方法
- 获取body元素 document.body
- 获取html元素 document.documentElement
遍历类数组对象 ```javascript // NodeList可以直接遍历 document.querySelectorAll(‘.box’).forEach(node => { console.log(node.className) })

// HTMLCollection需要转换为数组才能用forEach // 两种转换成数组的方式 Array.from(document.getElementsByClassName(‘box’)).forEach(node => { console.log(node.className) }) […document.getElementsByClassName(‘box’)].forEach…

<a name="BHcH9"></a>
# 4. 事件基础

- JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为
- 简单理解： **触发--- 响应机制**
- 网页中的每个元素都可以产生某些可以触发的 JavaScript 的事件
- 例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作
- 事件绑定
   - node.onclick = function(e){}
   - node.addEventListener('click' , function(e){})
- 注意
   - 在函数里面可以使用事件对象e
```javascript

  <button>按钮</button>
  <script>
    let btn = document.querySelector('button')
    btn.onclick = function(e) {
      console.log('我被点击了')
      console.log(e)
      console.log(this)
    }
  </script>

5. class操作

常见API
- node.className （老方法，用起来不严谨，尽量不用）
- node.classList.add
- node.classList.remove
- node.classList.contains
- node.classList.toggle(两种状态之间切换）

实现切换状态的效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换效果</title>
<style>
  div {
    width: 100px;
    height: 100px;
    background: red;
  }
  div.active {
    background: blue;
  }

</style>
</head>
<body>
<button>切换</button>
<div></div>
<script>
  let div = document.querySelector('div')
  let btn = document.querySelector('button')
  btn.onclick = function() {
    div.classList.toggle('active')
  }
</script>
</body>
</html>

6. 属性操作

常见API
- node.getAttribute(‘id’)
- node.setAttribute(‘data-id’ , ‘100’)
- node.removeAttribute(‘checked’)
- document.createAttribute(‘checked’)
- node.setAttributeNode(attrNode)
实现点击全选，和取消全选的切换 ```javascript 全选
- 篮球
- 足球
- 排球

<a name="adprE"></a>
# 7. 元素创建

- **常见API**
   - **document.createElement('div') **
      - 创建DOM节点，参数是标签名
      - 并没有展示在页面上，而是先存在内存中，等待下一步操作
   - **document.createTextNode("Hello")**
      - 创建文本节点，参数是字符串
   - **document.createDocumentFragment()**
      - 创建一个虚拟的DOM，用于提升性能，避免高频DOM操作
<a name="bde76"></a>
# 8. 元素复制添加修改删除

- **常见API**
   - parentNode.appendChild(childNode)
      - 在父亲的末尾添加元素
   - parentNode.insertBefore(newNode, referenceNode)
      - 把newNode插入到referenceNode元素之前
   - parentNode.replaceChild(newChild, oldChild)
      - 把oldChild替换为newChild
   - parentNode.removeChild(childNode)
      - 从parentNode里删除childNode
   - node.cloneNode(true)
      - 克隆一个元素，参数true的时候会深复制，也就是会复制元素及其子元素，false 的时候只复制元素本身
```javascript

  <button>点击</button>
  <div class="first">first</div>
  <div class="second">second</div>
  <script>
    let first = document.querySelector('.first')
    let second = document.querySelector('.second')
    let button = document.querySelector('button')
    button.onclick = function() {
        // 创建一个div
        let div = document.createElement('div')
        // 添加class
        div.classList.add('third')
        // 创建一个文本节点
        let text = document.createTextNode('third')
        // 将文本节点添加到div中
        div.appendChild(text)
          // 将这个div添加到first节点之前
        first.parentNode.insertBefore(div, first)

    }
   </script>

9. 修改样式

修改style属性
- 一般通过添加删除class的方式修改样式
Object.assign()
- 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 ```javascript const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 }

```javascript
document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'

function css(node, cssObj) {
  Object.assign(node.style, cssObj)
}

css(document.body, {
  color: 'red',
  backgroundColor: 'blue'
})

10. 获取样式

获取样式
- 使用getComputedStyle获取元素计算后的样式，不要通过 node.style.属性获取
点击按钮实现指定元素字体变大变小 ```javascript
刘德华

```

DOM

1. document

2. element

3. 获取元素

5. class操作

6. 属性操作

9. 修改样式

10. 获取样式