【JavaScript】添加、移除、移动、复制、创建和查找节点

创建新节点

document.createElement(tagName); // 创建⼀个指定标签名的元素节点
document.createTextNode(text); // 创建⼀个包含指定⽂本的⽂本节点
document.createDocumentFragment(); // 创建⼀个空的⽂档⽚段节点

添加、移除、替换、插⼊节点

parentNode.appendChild(node); // 在⽗节点的末尾添加⼀个⼦节点
parentNode.removeChild(node); // 从⽗节点中移除指定的⼦节点
parentNode.replaceChild(newNode, oldNode); // ⽤新节点替换指定的旧节点
parentNode.insertBefore(newNode, referenceNode); // 在参考节点之前插⼊⼀个新节点

查找节点

document.getElementsByTagName(tagName); // 返回指定标签名的元素节点集合
document.getElementsByName(name); // 返回具有指定名称的元素节点集合
document.getElementById(id); // 返回具有指定 id 的元素节点

注意，以上⽅法都是基于 document 对象进⾏操作的，如果需要在特定的节点上执⾏这些操

作，可以使⽤相应节点的⽅法，例如 parentNode.appendChild(node)

// 创建新节点
var newElement = document.createElement('div');
var newText = document.createTextNode('Hello, world!');
var fragment = document.createDocumentFragment();
// 添加节点
document.body.appendChild(newElement);
newElement.appendChild(newText);
// 移除节点
document.body.removeChild(newElement);
// 替换节点
var oldElement = document.getElementById('old');
var newElement = document.createElement('div');
document.body.replaceChild(newElement, oldElement);
// 插⼊节点
var referenceElement = document.getElementById('reference');
var newNode = document.createElement('p');
document.body.insertBefore(newNode, referenceElement);
// 查找节点
var elementsByTagName = document.getElementsByTagName('div');
var elementsByName = document.getElementsByName('name');
var elementById = document.getElementById('id');

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/685325.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！