DOM操作,HTMLCollection、NodeList

·  阅读 1293

Node(节点)是一个接口,很多类型DOM节点都继承自他,nodeType有以下12种

{
    ELEMENT_NODE: 1, // 元素节点
    ATTRIBUTE_NODE: 2, // 属性节点
    TEXT_NODE: 3, // 文本节点
    DATA_SECTION_NODE: 4,
    ENTITY_REFERENCE_NODE: 5,
    ENTITY_NODE: 6,
    PROCESSING_INSTRUCTION_NODE: 7,
    COMMENT_NODE: 8, // 注释节点
    DOCUMENT_NODE: 9, // 文档
    DOCUMENT_TYPE_NODE: 10,
    DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
}
复制代码

HTMLCollection、NodeList

区别:HTMLCollection是元素集合/NodeList是节点和元素的集合

  1.  <div><span></span></div>
    复制代码
  2.  <div>
         <span></span>
     </div>
    复制代码
  3. 这2者所获取的NodeList是不一样的,因为2会把空节点也算进去

获取方法

  1. HTMLCollection(元素顺序为文档流中的顺序,实时更新)
    1. Node.children
    2. document.getElementsByTagName
    3. getElementsByClassName
  2. NodeList(节点列表,即使是空节点也会算进去)
    1. Node.childNodes
    2. document.getElementsByName
    3. document.querySelectAll() //返回的是固定的,前2者返回的结果是实时的

常见的DOM操作方法

节点查找API

查找HTMLCollection

  1. 额外的: document.forms

节点创建API

  1. createElement: 不是一个document对象
  2. cloneNode(boolean): 是否复制子节点
  3. createTextNode
  4. createDucomentFragement: 文档碎片,大量操作DOM时能提升性能

节点修改API

  1. parent.appendChild(child)
  2. parent.insertBefore(newChild,oldChild)
  3. parent.removeChild(child)
  4. parent.replaceChild(newChild,oldChild)

节点关系API

父关系API

  1. parentNode
  2. parentElement: 返回父元素节点,父节点必须是element,否则返回null

子关系API

  1. children: HTMLCollection
  2. childNodes: NodeList
  3. firstChild/firestElementChild
  4. lastChild/lastElementChild

兄弟关系型API

  1. previousSibling: 前一个节点
  2. nextSibling: 后一个节点
  3. previousElementSibling/nextElementSibling

元素属性型API

  1. getAttribute('name')
  2. setAttribute('name','bin')

样式相关API

直接修改样式
elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');
复制代码
动态添加样式
var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改