javascript基础系列：DOM相关的技术知识点

港控/mmm° 2023-01-02 13:26 132阅读 0赞

### DOM及其基础操作 ###

> DOM: document object model 文档对象模型，提供一些属性和方法供我们操作页面中的元素

#### 获取DOM元素的方法 ####

1.  document.getElementById() 指定在文档中，基于元素的ID或者这个元素对象
2.  \[context\].getElementsByTagName() 在指定上下文（容器）中，通过标签名获取一组元素集合
3.  \[context\].getElementsByClassName() 在指定上下文中，通过样式类名获取一组元素集合（不兼容ie6-8）
4.  \[context\].getElementsByName() 在整个文档中，通过标签的name属性值获取一组元素集合（在ie中只有表单元素的name才能识别，所以一般只用于表单元素的处理）
5.  document.head/ document.body/docuementElement获取页面中的head/body/html元素
6.  \[context\].querySelector(\[selector\]) （不兼容ie6-8）在指定的上下文中，通过选择器获取指定的元素对象
7.  \[context\].querySelectorAll(\[selector\]) （不兼容ie6-8） 在指定的上下文中，通过选择器获取指定的元素集合

### js中的节点和描述节点之间关系的属性 ###

1.  节点：Node（页面中所有的东西都是节点）
2.  节点集合： NodeList(getElementsByName/querySelectorAll获取的都是节点集合)

*  元素节点（元素标签）

nodeType: 1  
nodeName: 大写的标签名  
nodeValue: null

*  文本节点

nodeType: 3  
nodeName: ‘\#text’  
nodeValue: 文本内容

*  注释节点

nodeType: 8  
nodeName: ‘\#comment’  
nodeValue: null

*  文档节点document

nodeType: 9  
nodeName: ‘\#document’  
nodeValue: null

1.  描述节点之间的关系的属性

*  childNodes: 获取所有的子节点（非ie6-8）中会把空格和换行当做文本节点
 *  children: 获取所有的元素子节点（子元素标签）（ie6-8下会把注释也当元素节点）
 *  firstChild：获取第一个子节点
 *  lastChild: 获取最后一个子节点
 *  firstElemeentChild/lastElementChild(不兼容ie6-8)
 *  previousSibling: 获取上一个哥哥的节点
 *  nextSibling: 获取下一个弟弟节点
 *  previousElementSibling/nextElementSibling： 获取兄弟元素节点(不兼容ie6-8)

/** * children: 获取指定上下文中，所有元素子节点 * @params * context [element object]指定的上下文元素信息 * @return * [array] 返回所有的元素子节点集合 **/
    
    function children(context) { 
      // 1. 先获取所有的子节点
    	var res = [],
          nodeList = context.childNodes
      // 2. 循环遍历所有的子节点，找出元素子节点，存储到res中即可
      for(var i = 0; i < nodeList.length; i++) { 
      	var item = nodeList[i];
        item.nodeType === 1? res.push(item) : null
      }
      return res
    }
    
    // 获取上一个哥哥元素
    function prev(context) { 
    	var pre = context.previousSibling;
      while(pre.nodeType !== 1) { 
      	pre = context.previousSibling;
      }
      return pre;
    }

### 在js中动态增删改元素 ###

1.  createElement 创建元素对象
2.  createTextNode 创建文本对象
3.  appendChild 把元素添加到容器的末尾
4.  insertBefore 把元素添加到指定容器元素的前面

// 动态创建一个div元素对象，把其赋给box
    let box = document.createElement('div');
    box.id = 'box'
    box.style.width = '200px'
    box.style.height = '200px'
    box.className = 'red'
    let text = document.createTextNode('珠峰培训');
    
    // 添加： 容器.appendChild(元素)
    box.appendChild(text)
    document.body.appendchild(box)
    
    // 放到指定元素前： 容器.insertBefore([新增元素],[指定元素])

1.  cloneNode(true) 克隆元素或者节点
2.  removeChild 移除容器中的某个元素

### 设置自定义属性的其它方式 ###

setAttribute/getAttribute/removeAttribute 设置/获取/删除属性

### 总结 ###

今天主要分享DOM相关的技术知识点，如果想了解更多，请扫描二维码，关注公众号  
![qrcode\_for\_gh\_4d3763fa9780\_258 (1).jpg][qrcode_for_gh_4d3763fa9780_258 _1_.jpg]

[qrcode_for_gh_4d3763fa9780_258 _1_.jpg]: /images/20221119/064e39c3cc8b42a0a99c53bcd866f605.png