DOM基础操作

痛定思痛。 2023-06-07 08:17 35阅读 0赞

## javaScript的组成 ##

1.  js语法：ECMAScript
2.  DOM：Document Object Model（文本对象模型），可以操作html+css
3.  BOM：Browser Object Model（浏览器对象模型）

## DOM树结构图 ##

![DOM树结构图][DOM]

## DOM节点类型 ##

![节点类型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTcwMDk3_size_16_color_FFFFFF_t_70]

## 节点的属性 ##

1.  nodeType \_\_\_\_区分节点的类型
2.  nodeName \_\_\_\_获取节点的名称
3.  nodeValue \_\_\_\_获取注释节点和文本节点的内容
4.  attributes \_\_\_\_获取元素节点的属性节点结合

## 基于节点树的查询 ##

1.  childNodes \_\_\_\_查询所有的子节点们
2.  firstChild \_\_\_\_查询第一子节点
3.  lastChild \_\_\_\_查询最后一个子节点
4.  parentNode \_\_\_\_查询父节点
5.  nextSibling \_\_\_\_查询下面的相邻的兄弟节点
6.  previousSibling \_\_\_\_查询寻上面的相邻的兄弟节点

## 基于元素节点树的查询 ##

1.  children \_\_\_\_查询所有的元素子节点们
2.  firstElementChild \_\_\_\_查询第一个元素节点
3.  lastElementChild \_\_\_\_查询最后一个元素节点
4.  parentElement \_\_\_\_查询符节点
5.  nextElementSibling \_\_\_\_查询下面的相邻的兄弟元素节点
6.  previousElementSibling \_\_\_\_查询上面的相邻的元素节点

var oBox = document.getElementById('box');  //通过id名字获取节点
    console.log(oBox.previousElementSibling);//获取下一个兄弟元素节点
    console.log(document.getElementById('a').parentNode)//获取父节点

## 获取元素的方法 ##

1.  document.getElementById()\_\_\_\_通过id名称获取节点
2.  document.getElementByClassName()\_\_\_\_通过class名字获取节点，获取的是一个数组
3.  document.getElementByTagName()\_\_\_\_通过标签名字获取节点，获取到的一个数组
4.  document.querySelectorAll()\_\_\_\_通过复合选择器获取节点，获取的是一个数组
5.  document.querySelector()\_\_\_\_通过复合选择器获取复合条件的第一个节点
6.  document.getElementsByname()\_\_\_\_通过name属性获取节点，获取的是一个数组
7.  document.head\_\_\_\_获取head标签
8.  document.body\_\_\_\_获取body标签
9.  document.documentElement\_\_\_\_获取html标签

**get系列获取元素的方式是动态获取，动态获取指的是：在获取节点之后还可能检测到符合条件的节点，并放置到集合中**  
**query系列获取元素的方式是静态获取，静态获取指的是：在获取节点之后无法检测出符合条件的节点**

//var oBox = document.getElementById('box');
    
        var oBox = document.getElementsByClassName('box')[1]
    
        var aBox = document.getElementsByTagName('div');
    
        var aLi = document.querySelectorAll('.box ul li');
    
        var oLi = document.querySelector('.box ul li');
    
        var aInput = document.getElementsByName('a')
        console.log(aInput);
    
        console.log(document.head);
        console.log(document.body);
        console.log(document.documentElement);
        console.log(document);

## 节点的创建 ##

1.  document.createElement()\_\_\_创建元素节点
2.  document.createTextNode()\_\_\_\_创建文本节点
3.  document.createCommert()\_\_\_\_创建注释节点
4.  document.createDocumentFragment()\_\_\_\_创建文档片段节点

## 节点的添加（剪切操作） ##

1.  parentNode.appendChild(子节点)\_\_\_\_把子节点插入到父节点的最后面
2.  parentNode.insertBefore(A,B)\_\_\_\_把节点A添加到节点B之前

var oH3 = document.getElementsByTagName('h3')[0];
        oBox.appendChild(oH3);//把oDiv插入到oBox的最后面
    
    	var oComment = document.createComment('我是注释的内容')
        oBox.appendChild(oComment);

## 节点的替换（剪切操作） ##

parentNode.replaceChild(A,B)\_\_\_\_用节点A替换节点B

## 节点的删除 ##

parentNode.removeChild(子节点)

## 获取节点内容 ##

1.  innerText\_\_\_可以设置节点的文本内容，也可以读取节点的内容，不可以解析标签
2.  innerHTML\_\_\_\_可以设置节点的文本内容，也可以读取节点的内容，也可以解析标签

var oH3 = document.querySelectorAll('h3');
    // console.log(oH3[0].innerText);
    //oH3[0].innerText = '<a>我是修改后文本节点的内容</a>';
    oH3[0].innerHTML = '<a>我是修改后文本节点的内容</a>';

## 属性节点的方法 ##

1.  元素节点.setAttribute(属性节点名，属性节点值)\_\_\_设置指定的属性节点
2.  元素节点.getAttribute(属性节点名)\_\_\_获取指定的属性节点名称的值
3.  元素节点.removeAttribute(属性节点名)\_\_\_删除指定属性节点
4.  元素节点.hasChildNodes()\_\_\_判断元素节点有没有子节点

var oBox = document.getElementById('box');
    // console.log(oBox.children[0].attributes[0]);
    // oBox.children[0].setAttribute('class','heaven')
    
    //console.log(oBox.children[0].getAttribute('class'));
    // oBox.children[0].removeAttribute('class')
    
    console.log(oBox.hasChildNodes());

[DOM]: /images/20230601/a4432b43add14c35b863fee3e9ac4762.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTcwMDk3_size_16_color_FFFFFF_t_70]: /images/20230601/8a726687ee7b485bbda383ff4edc5580.png