节点操作

1.利用DOM提供的方法获取元素

2.利用节点层级关系获取元素

2.1利用父子节点关系(逻辑性强,但兼容性差)

5.2 节点概述

(节点类型,节点名称,节点值)nodeType,nodeName,nodeValue

1. 元素节点 nodeType 1
2. 属性节点 nodeType 2
3. 文本节点 nodeType 3(文字 空格 换行)

5.3节点层级

// 1.父级节点 node.parentNode
let erweima = document.querySelector('.erweima')
erweima.parentNode
// 得到的是离元素最近的父级节点 找不到父节点返回null

// 2.子节点
let ul = document.querySelector('.ul')
ul.childNodes// 包括所有子节点
// 如果只想获取元素阶段，需要专门处理
for(let i = 0;i<ul.childNodes.length;i++){
  if(ul.childNodes[i].nodeType == 1){
    console.log(ul.childNodes[i])
  }
}

// 子节点
// parentNode.children（非标准）

// 子节点-第一个子元素和最后一个子元素
// parentNode.firstChild(不管是文本节点还是元素节点)
// parentNode.lastChild

// 第一个元素节点(兼容性IE9以上)
// parentNode.firstElementChild
// parentNode.lastElementChild

// 实际开发的写法，既没有兼容性问题又返回第一个子元素
// parentNode.children[0]
// parentNode.children[parentNode.children.length - 1]
// ol.children[ol.children.length - 1]

案例：下拉菜单

// 在css中先将li里面的孩子隐藏
// 获取元素
let nav = document.querySelector('.nav')
let lis = nav.children
for(let i = 0;i<lis.length;i++){
  lis[i].onmouseover = function (){
    this.children[1].style.display = 'block'
  }
  lis[i].onmouseout = function (){
    this.children[1].style.display = 'none'
  }
}

节点操作——兄弟节点

let div = document.querySelector('div')
// 下一个(包括元素节点 文本节点)
console.log(div.nextSibling)
// 上一个
console.log(div.previousSibling )
// 下一个兄弟元素节点
div.nextElementSibling
div.previousElementSibling

如何解决兼容性问题

function getNextElementSibling(element){
  let el = element
  while (el === el.nextSibling){
    if(el.nodeType === 1){
      return el
    }
  }
  return null
}

节点操作——创建和添加节点

// 1.创建节点
// document.createElement('tagName')
let li = document.createElement('li')
// 2.添加节点
// node.appendChild(child) 将节点添加到指定父节点列表末尾 node父级 child子级 类似数组的push
let ul = document.querySelector('ul')
ul.appendChild(li)
// node.insertBefore(child,指定元素)
let lili =  document.createElement('li')
ul.insertBefore(lili,ul.children[0])

案例：简单版发布留言案例

// 1.获取元素
let btn = document.querySelector('button')
let text = document.querySelector('textarea')
let ul = document.querySelector('ul')
// 2.注册时间
btn.onclick = function (){
  if(text.value === ''){
    alert('你还没输入内容')
    return false
  }else {
    let li = document.createElement('li')
    li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
    // 添加元素
    // ul.appendChild(li)
    // 删除元素 删除的是当前链接li 它的父亲
    let as = document.querySelectorAll('a')
    for(let i = 0;i<as.length;i++){
      as[i].onclick = function (){
        // 删除的是li当前a所在的li
        ul.removeChild(this.parentNode)
      }
    }
  }
}

节点操作--删除节点

// node.removeChild(child)
let ul = document.querySelector('ul')
ul.removeChild(ul.children[0])

案例

// 1.获取元素
let ul = document.querySelector('ul')
let btn = document.querySelector('button')
btn.onclick = function (){
  if(ul.children.length == 0){
    this.disabled = true
  }else {
    ul.removeChild(ul.children[0])
  }
}

节点操作——复制节点

// node.cloneNode()
let ul = document.querySelector('ul')
// 如果括号参数为空或者false即浅拷贝（复制节点，没有复制里面的子节点）
let lili = ul.children[0].cloneNode(true)
ul.appendChild(lili)

三种创建元素方式区别

document.write()
// 直接将内容写入页面内容流 文档流执行完毕，会导致页面全部重绘
innerHTML 
// 创建元素
// 是将内容写入某个DOM节点，不会导致页面全部重绘
// 创建多个项目效率更高（不拼接字符串，才去数组形式拼接）结构稍微复杂
document.createElement()
// 创建多个项目效率稍低一点点，结构更清晰

6. DOM重点核心

// 6.1创建
/*
* 1.document.write
* 2.innerHTML
* 3.createElement
* */

// 6.2增
/*
* 1.appendChild
* 2.insertBefore
* */

// 6.3 删
/*
* 1.removeChild
* */

// 6.4 改
/*
* 1.修改元素属性 src href title
* 2.修改普通元素内容 innerHTML innerText
* 3.修改表单元素 value type disabled
* 4.修改元素样式 style className
* */

// 6.5查
/*
* 1.DOM提供的API方法 getElementById getElementsByTagName 不提倡
* 2.H5提供新方法 querySelector querySelectorAll 提倡
* 3.利用节点操作获取元素 父（parentNode） 子（children） 兄（previousElementSibling）nextElementSibling
*
* */

// 6.6属性操作
/*
* 1.setAttribute
* 2.getAttribute
* 3.removeAttribute 移除属性
* */

// 6.7事件操作
/*
* 1.点击 onclick
* */