JavaScript中操作节点

目录

• 1、获取节点
  • 1.1、用 getElement 方法获取 
  • 1.2、用 querySelector 方法获取
• 2、查看设置属性（getAttribute、setAttribute）
• 3、设置样式
• 4、设置文本节点
• 5、父子同胞节点
  • 5.1、关于子节点的操作
  • 5.2、关于父节点的操作
  • 5.3、关于同胞节点的操作
• 6、创建新增、删除替换节点
  • 6.1、创建元素节点
  • 6.2、创建文本节点
  • 6.3、添加节点
  • 6.4、删除节点

 

---

1、获取节点

1.1、用 getElement 方法获取 

 

 获取元素节点时，必须等到DOM树加载完成后才能获取。两种处理方式：（1）将JS写在文档最后；（2）将代码写入window.onload函数中；

//通过ID来查看元素属性
var li = document.getElementById("first"); 
//通过类名来查看元素属性，返回元素数组
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性，返回数组
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性，返回数组
var lis3 = document.getElementsByTagName("li");

这一系列方法，也可以先选中一个DOM节点，在从选中的DOM节点的子节点里，选择需要的节点：

document.getElementById("div1").getElementsByTagName("li")[0];

 

1.2、用 querySelector 方法获取

 querySelector() 方法仅仅返回匹配指定选择器的第一个元素。

var dq1 = document.querySelector("#id");　　

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

var dqs1 = document.querySelectorAll("#div1 li");

 

2、查看设置属性（getAttribute、setAttribute）

attributes: 获取当前节点的所有属性节点。 返回数组格式。

document.getElementsByTagName("a")[0].getAttribute("target");
//element.setAttribute("属性名","属性值");
document.getElementsByTagName("INPUT")0].setAttribute("type","button");

 

3、设置样式

使用setAttribute设置class和style。

document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");

使用 className设置元素类名

document.getElementById("first").className = "class1";

使用 style 样式 直接修改单个样式。注意样式名必须使用驼峰命名法。

document.getElementById("first").style.fontSize = "18px";

使用 style 或 style.cssText 设置样式：

// IE不兼容
document.getElementById("first").style = "color:red;"; 
//cssText 属性用于设置或者返回元素声明的内联样式。
document.getElementById("first").style.cssText = "color:red;";

 

4、设置文本节点

innerHTML：取到或设置一个节点中的HTML代码。

innerText：取到或设置一个节点中的文本，会判断HTML标签样式，如果该标签隐藏，则该标签文本不会输出

textContent：但凡属于某一节点内的文本内容，除了HTML代码，其他都输出

<div class="container">
    aaaa
    <h1 class="h1 h2">container里的标题1</h1>
    <h2 style="display: none">隐藏内容</h2>
    bbbb
</div>

let cont = document.getElementsByClassName('container')[0];
console.log(cont.innerHTML);
//输出：
// aaaa
//    <h1 class="h1 h2">container里的标题1</h1>
//    <h2 style="display: none">隐藏内容</h2>
//    bbbb
console.log(cont.innerText);
//输出：
//aaaa
//container里的标题1
//bbbb
console.log(cont.textContent);
//输出：
//aaaa
//    container里的标题1
//    隐藏内容
//    bbbb

 

5、父子同胞节点

5.1、关于子节点的操作

childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。

children： 获取当前节点的所有元素子节点（不包含文本节点）。

firstChild： 获取第一个子节点，包括回车等文本节点；

firstElementChild： 获取第一个元素节点。 不含文本节点；

lastChild： 获取最后一个子节点，包括回车等文本节点；

lastElementChild： 获取最后一个子节点，不含文本节点；

5.2、关于父节点的操作

parentNode: 获取当前节点的父节点。

5.3、关于同胞节点的操作

previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；

previousElementSibling： 获取当前节点的前一个元素兄弟节点；

nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；

nextElementSibling：获取当前节点的后一个元素兄弟节点；

 

6、创建新增、删除替换节点

6.1、创建元素节点

document.createElement("div"); 　　//创建元素节点

6.2、创建文本节点

document.createTextNode(text)
var btn=document.createTextNode("Hello World");

 

6.3、添加节点

往父节点添加子节点

document.getElementById("myList").appendChild(newItem);  　　　　　　　　　　//在父节点的末尾添加子节点
document.getElementById("myList").insertBefore(newItem,existingItem);   　//在父节点中的某一已存子节点前面添加节点　　existingItem 是指父节点中已经存在的子节点，插入的新节点就插在这个子节点的位置

 

6.4、删除节点

父节点.removeChild(子节点)： 从父节点中，删除指定子节点。

父节点.replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点。