DOM文档对象模型 (Document Object Model, DOM) 是 HTML的编程接口。用对象和HTML结

DOM

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

document（代表整个页面文档）

包含文档对基本信息

document.head
document.body 
document.title 
document.location  // 当然页面url相关的东西
document.location.href  // 获取当前页面完整的url 如果你想跳转页面可以直接document.location.href = 'https//jirengu.com'
• document.location.hash // url 里面以井号开头的东西
• docuemnt.location.search  // url 里面以问号开头的东西
• document.location.reload()  // 页面刷新
• document.location.assign('https://jirengu.com') // 页面跳转

Element（页面的元素）

DOM元素对象

常见属性如下

 node.nodeName：元素标签名，还有个类似的tagName 
 node.nodeType：元素类型
 • node.className：类名 
 • node.id：元素id
 • node.children：子元素列表（HTMLCollection）
 • node.childNodes：子元素列表（NodeList）
 • node.firstChild：第一个子元素
 • node.lastChild：最后一个子元素 
 • node.nextSibling：下一个兄弟元素 
 • node.previousSibling：上一个兄弟元素
 • node.parentNode：父元素

获取元素（获取页面上的元素）

ES3写法，不推荐

document.getElementById('id')             //Element
document.getElementsByClassName('class')  //HTMLCollection 
document.getElementsByTagName('p')        //HTMLCollection    
document.getElementsByName('username')    //NodeList 
带s的都是类数组
Element 是Dom元素

ES5写法，推荐

HTMLCollection 是类数组只能用for循环遍历数组 NodeList 也是类数组可以用.for each 遍历只有一个for each 方法其他数组的方法都没有

 document.querySelector('.box')            //Element  选择一个元素，得到的是一个Dom节点
 document.querySelectorAll('.box')         //NodeList  选择一组元素，即使页面只有一个，得到的也是一个类数组

注意

getElementsByClassName获取的是一个类数组对象，不是一个数组
不要少写getElementsByClassName 中的s
querySelector的参数是一个任意合法的CSS3选择器
querySelectorAll的到的是一个类数组对象
NodeList和HTMLCollection的差异是前者有forEach方法

遍历类数组对象

// NodeList可以直接遍历 
document.querySelectorAll('.box').forEach(node => {   // node 是每一个Dom元素意思
    console.log(node.className) 
}) 

// HTMLCollection需要转换为数组才能用forEach    HTMLCollection没有forEach方法
// 第一种方式
Array.from(document.getElementsByClassName('box')).forEach(node => {               console.log(node.className)
 }) 
// 第二种方式
[...document.getElementsByClassName('box')].forEach...
// 第三种方式（for循环）
for(var i = 0; i<xxx.length;i++) { }

DOM事件

事件绑定

node.onclick = function(e){} 
node.addEventListener('click', function(e){ })

注意

在函数里面可以使用事件对象e 函数里面的this代表node本身

let button = document.querySelector('button')

button.onclick = function(e){
  console.log(e)
  console.log('点了我')
  console.log(this)
}

button.addEventListener('click',function(e){
  console.log(e)
  console.log('点了我')
  console.log(this)
}

class操作

常见API

node.className   老方法，用起来不严谨，尽量不用 
node.classList.add        // 添加
node.classList.remove  // 删除
node.classList.contains  // 判断
node.classList.toggle    // 切换

// Html
<div class="box"></div>
// Css
.box{
  width:100px;
  height:100px;
  background:red;
}
.active{
   background:yellow;
}
// Javascript
let box = document.querySelector('.box')
box.classList.add('ok') // 增加class ok
box.classList.add('active')
box.classList.remove('ok')  // 删除这个ok
box.classList.contains('ok') // 判断是否有这个ok 返回true 或false
box.classList.toggle('active')  // 没按一次返回红或黄，返回true或false 切出去就返回false 变成红色

属性操作

常见API

node.getAttribute('id')  // 通过属性名获取属性值
node.setAttribute('data-id', '100') 
node.removeAttribute('checked')
document.createAttribute('checked') // 有这个属性名 没这个属性值
node.setAttributeNode(attrNode)

动手实现点击全选，和取消全选的切换

// Html
 <input class="select-all" type="checkbox">全选
  <ul>
    <li class="item"><input type="checkbox">1</li>
     <li class="item"><input type="checkbox">2</li>
     <li class="item"><input type="checkbox">3</li>
     <li class="item"><input type="checkbox">4</li>
     <li class="item"><input type="checkbox">5</li>
// Javscript
let selectAll = document.querySelector('.select-all')
let itemList = document.querySelectorAll('.item')

selectAll.onclick = function(e){
  if(selectAll.checked){
     itemList.forEach(node =>{
       let checkedAttr = document.createAttribute('checked')
       node.querySelector('input').checked = true
   })
}else{
      itemList.forEach(node =>{
        node.querySelector('input').checked = false
        })
}
}

元素创建

常见API

document.createElement('div')
 • 创建DOM节点，参数是标签名
document.createTextNode("Hello") 
• 创建文本节点，参数是字符串 
document.createDocumentFragment() 
• 创建一个虚拟的DOM，用于提升性能，避免高频DOM操作

元素复制添加修改删除

常见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 的时候只复制元素本身

// Html
<div class="box">
<div class="first">first</div>
<div class="second">second</div>
</div>
<button>button</button>

// Javascript
let second = document.querySelector('.second')
let first = document.querySelector('.first')
let button = document.querySelector('button')

button.onclick = function(){
// first.parentNode.insertBefore(second,first)

 let div = document.createElement('div')
 div.classList.add('third')
 let text = document.createTextNode('third')
 div.appendChild(text)
 first.parentNode.inserBefore(div,first)

 first.parentNode.removeChild(first)
}

修改样式

修改style属性

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc' 
function css(node, cssObj) {   // node是节点，cssobj 是css得对象
 Object.assign(node.style, cssObj)
 }
 css(document.body, {  
            color: 'red',  backgroundColor: 'blue'
 })
Tips: 一般通过添加删除class的方式修改样式

获取样式

使用getComputedStyle获取元素计算后的样式，不要通过 node.style.属性获取

const node = document.querySelector('p') 
const color = window.getComputedStyle(node).color // 获取元素计算后的样式
console.log(color)

<button class="btn-bigger">变大</button>
<button class="btn-smaller">变小</button>
<div class="box">饥人谷</div>

const $ = s =>document.querySelector(s)

let box = $('.box')
let btnBigger = $('.btn-bigger')
let btnSmaller = $('.btn-smaller')

btnBigger.onclick = function( ){
  let fontSize = parseInt(getComputedStyle(box).fonSize)
  box.style.fontSize = fonSize + 2 +'px'
}

btnSmaller.onclick = function( ){
  let fontSize = parseInt(getComputedStyle(box).fonSize)
  box.style.fontSize = fonSize - 2 +'px'
}