增

创建元素

  • document.createElement(‘div’) 创建元素

  • document.createTextNode(‘我是谁’) 创建文本节点

    添加元素(创建的元素默认在 js 线程中)

  • div.appendChild(xxx) 添加子节点

  • document.body.appendChild(div) 添加到 body 中 或者 head

    删

    删除元素

  • div.remove() div = null

  • div.parentNode.removechild(childNode) 兼容IE

    改

    克隆元素

    同一个元素不能出现在两个地方，所以需要克隆

  • div.cloneNode(true) true 为深拷贝 false浅拷贝

    设置元素属性

  • 自有属性 div.id

  • class 属性
    • div.className div.className += class是 js 保留字，所以不能使用
    • 新语法 div.classList div.classList.add()
  • 自定义属性 div.setAttribute(‘xxx’,’xxx’)

  • div.dataset.x

    修改元素内容

  • 文本

    • div.innerText() IE
    • div.textContent()

  • html

    • div.innerHTML

      查

      获取元素（标签）

  • window.idxxx 或者直接 idxxx

  • document.getElementByld(‘idxxx’)
  • document.getElementsByTagName(‘div’)[0]
  • document.getElementsByClassName(‘red”)[0]document.querySelector(‘#idxxx’)

  • document.querySelectorAll(‘red”)[0]

    获取父代

  • node.parentNode || node.parentElement

    获取子代

  • node.childNodes || node.children

    获取兄弟姐妹

  • node.parentNodes.children 遍历排除自己

    其他

  • 第一个子节点 node.firstChild

  • 最后一个子节点 node.lastChild
  • 上一个兄弟节点 node.previousSibling 元素 node.previousElementSibling
  • 下一个兄弟节点 node.nextSibling 元素 node.nextElementSibling

元素的六层原型链

image.png

  1. 第一层原型HTMLDivElement.prototype

这里面是所有div共有的属性，不用细看

  1. 第二层原型HTMLElement.prototype

这里面是所有HTML标签共有的属性，不用细看

  1. 第三层原型 Element.prototype

这里面是所有XML、HTML标签的共有属性，你不会以为浏览器只能展示HTML吧

  1. 第四层原型Node.prototype

这里面是所有节点共有的属性，节点包括XML标签文本注释、HTML标签文本注释等等

  1. 第五层原型EventTarget.prototype

里面最重要的函数属性是addEventListener

  1. 最后一层原型就是Object.prototype了