DOM编程艺术（节点操作）_节点风格编程-优快云博客

本文链接：https://blog.youkuaiyun.com/x_chengqq/article/details/51645430

本文详细介绍了如何使用JavaScript操作DOM，包括获取、创建、修改、插入和删除节点的方法，并提供了实例代码帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考书：JavaScript DOM编程艺术（第2版）

大纲：

-获取节点

-创建节点

-修改节点

-插入节点

-删除节点

-innerHTML

一、获取节点

1、通过关系获取节点：

*父子关系

-parentNode

-firstChild / lastChild / childNodes

-childNodes / children

*兄弟关系

-previousSibling / nextSibling

-previousElementSibling / nextElementSibling

存在问题：通过节点关系来获得元素的可维护性差。

2、通过接口获取节点：

*getElementById

*getElementsByTagName

*getElementsByClassName

*querySelector / All

name	only document	sole	live
getElementById	Y	Y
getElementsByTagName			Y
getElementsByClassName			Y
querySelectorAll
querySelector		Y

二、创建节点

document.createElement(tagName)

三、修改节点

1、textContent （IE9以下不支持）

element.textContent 节点及其后代节点的文本内容

2、innerText (不是W3C规范，Firefox不支持)

if(!('innerText' in document.body)){
	HTMLElement.prototype.__defineGetter__("innerText", function(){
		return this.textContent;
	});
	HTMLElement.prototype.__defineSetter__("innerText",function(s){
		return this.textContent = s;
	});
}

四、插入节点

1、appendChild 在指定元素的末尾插入节点

element.appendChild(achild);

2、insertBefore 在指定元素的前面插入节点

三个参数：（1）新元素 newElement

（2）目标元素 targetElement

（3）父元素：目标元素的父元素 parentElement

parentElement.insertBefore(newElement,targetElement)

不必搞清楚父元素到底是哪个，因为targetElement元素的parentNode属性值就是它。在DOM里，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点。）

targetElement.parentNode.insertBefore(newElement,targetElement)

3、自己写insertAfter函数

//编写insertAfter函数,功能是在现有元素后插入一个新元素
function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else{
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}

五、删除节点

element.removeChild(child)

六、innerHTML

element.innerHTML

存在问题：内存泄露

安全问题

建议仅用于新节点。