js dom操作(js dom获取、删除、新增节点方法集合)

前端这点事 2021年11月02日 23:16 135 0

DOM操作

节点类型

节点分为三个类型

· 元素节点如上述html中的p标签

· 属性节点如上述html中的title属性，元素节点的属性

· 文本节点如上述html中的备注，元素节点的子节点

文档加载顺序

html的文档是按照顺序进行加载的，如果将js写在<head>中，获取<body>中节点时会获取不到，使用两种方式来解决这种情况

第一种方式：在<html>之后编写<script>

第二种方式：在<script>中使用window.onload来加载html文档，加载完之后再去获取html中的元素节点就可以获取到

获取节点

获取元素节点

获取id为content的节点，html中需要确保id值唯一

window.onload = function(){

var content = document.getElementById("content");

}

获取li节点，使用标签名获取节点的集合

var liNodes = document.getElementsByTagName("li");

属于node的方法，可以使用任何节点来调用该方法

var content = document.getElementById("content");

var liNodes = content.getElementsByTagName("li");

根据元素的name属性获取指定的节点集合

var genders = document.getElementsByName("gender");

操作属性节点

通过元素节点 . 的当时来获取和设置

// 获取元素节点var nameNode = document.getElementById("name");// 读取属性的值

var value = nameNode.value;// 设置指定的属性值

nameNode.value = "你好";

获取元素节点的子节点

window.onload = function () {

// 获取city节点

var city = document.getElementById("city");

// 获取city节点的所有li子节点

var cityLiNode = city.getElementsByTagName("li");

alert(cityLiNode.length);

}

节点的属性

所有的节点都包含有nodeType、nodeName、nodeValue

// 元素节点

var elementNode = document.getElementById("bj");

alert(elementNode.nodeType); // 元素节点:1

alert(elementNode.nodeName); // 节点名：li

alert(elementNode.nodeValue); // 元素节点没有nodeValue属性值：null

// 属性节点

var attributeNode = elementNode.getAttributeNode("name");

alert(attributeNode.nodeType); //属性节点：2

alert(attributeNode.nodeName); // 属性节点的节点名：属性名

alert(attributeNode.nodeValue); // 属性节点的nodeValue属性值：属性值

// 文本节点var textNode = elementNode.firstChild;

alert(textNode.nodeType); //文本节点：3

alert(textNode.nodeName); // 文本节点的nodeName：#text

alert(textNode.nodeValue); // 属性节点的nodeValue ：文本值

创建节点

// 新创建一个元素节点window.onload = function () {

// 创建li元素节点

var liNode = document.createElement("li");

// 获取需要加入li节点的父节点

var cityNode = document.getElementById("city");

// 将li元素节点添加到父节点中

cityNode.appendChild(liNode);

// 创建一个文本节点

var textNode = document.createTextNode("香港");

// 将文本节点放入li元素节点中

liNode.appendChild(textNode);

}

删除节点

window.onload = function () {

var cityNode = document.getElementById("city");

// 删除子节点

cityNode.parentNode.removeChild(cityNode);

}

标签： JavaScript

本文地址： https://www.ltonus.com/JavaScript/js-dom-action.html

文章来源：前端这点事