原生javascript操作DOM节点的相关方法

最新推荐文章于 2023-05-10 18:13:39 发布

走路的猫头鹰

最新推荐文章于 2023-05-10 18:13:39 发布

阅读量410

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u014268482/article/details/103671957

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript原生操作节点的相关方法

这几天无聊在用原生的js玩控制DOM节点操作，为方便今后用到不用重复去翻百度查资料，现将使用到的dom操作相关API进行记录:

首先这里需要注明一个知识点:

一般情况下DOM树结构对应如下:

document 文档
element 元素
node 节点
元素 DOM中一个标签即为节点

页面中任何内容即称之为节点(例如: 一个标签称之为标签节点，一个标签的属性称之为属性节点，标签中的文本内容称之为文本节点)，元素则指的是标签。从以上定义可知: 节点的范围要大于元素，即节点包括元素。

重点:HTML文档中根元素(根节点)指的是HTML标签。

节点三属性

nodeType 节点类型(值为数字，值分别代表如下: 1. 代表标签节点、2. 属性节点、3. 文本节点、8. 注释节点、9. 文档节点)
nodeName 节点名称(标签节点返回大写的标签名，属性节点返回小写的属性名，文本节点返回#text，文档节点名称返回#document，注释节点返回#comment)
nodeValue 节点内容(标签节点返回null[因为标签不直接包含文本和属性值，节点内容只有文本节点和属性节点有])

HTML文档结构如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作的相关API</title>
</head>
<body>
	<p id="p">这个是一个段落</p>
  <span id="span">这个是span标签</span>
  <ul id="ul">
    <li>第一个li</li>
    <li>第二个li</li>
    <li id="three">第三个li</li>
    <li>第四个li</li>
    <li>第五个li</li>
  </ul>
</body>
</html>

JavaScript代码如下

var ul = document.getElementById("ul");	// 通过ul获取ul元素对象
var parentNode = ul.parentNode;		// 获取父级节点(这里也就是body标签)
var parentElement = ul.parentElement;	// 获取父级元素(一般情况下雨parentNode结果相同，这里也是body标签)
var lis = ul.children;	// 获取ul下面所有的li子元素
var childNodes = ul.childNodes;	//获取ul下面的所有的子节点(除li节点外，包括有换行符的文本节点)
var idNode = ul.getAttributeNode("id");		// 在当前元素中获取名为ID的属性节点
var attrValue = idNode.nodeValue;	// 因为idNode是ID属性节点，所以返回的内容为ID的值
var li2 = ul.children[2]; 	// 获取第三个li子元素(下标从零开始获取)
var nextSibling = lis2.nextSibling;	// 获取当前节点的下一个兄弟节点[有可能是文本节点也有可能是li节点，就要看是否换行了](IE8中获取的是下一个元素, 也就是说不管换不换行直接就是获取的是li元素了)
var previousSibling = lis2.previousSibling;	// 获取当前节点的上一个兄弟节点[有可能是文本节点也有可能是li节点，就要看是否换行了](IE8中获取的是上一个元素, 也就是说不管换不换行直接就是获取的是li元素了)
var nextElementSibling = lis2.nextElementSibling;	// 获取下一个元素(IE8及以下旧版本浏览器直接不支持)
var previousElementSibling = lis2.previousElementSibling; 	//获取上一个元素(IE8及以下旧版本浏览器直接不支持)
var firstChild = ul.firstChild;	// 获取第一个子节点(IE8及以下旧版本浏览器获取的是第一个子元素)
var lastChild = ul.lastChild; 	// 获取最后一个子节点(IE8及以下旧版本浏览器获取的是最后一个子元素)
var firstElementChild = ul.firstElementChild; 	// 获取第一个子元素(IE8及以下旧版本浏览器不支持)
var lastElementChild = ul.lastElementChild;		// 获取最后一个子元素(IE8及以下旧版本浏览器不支持)
var nodeName = ul.nodeName;	// 因为ul是标签节点，所以返回的是大写的标签名UL
var nodeType = ul.nodeType;	// 查看ul的节点类型,因为这里是元素本身，显示的为数字1
var nodeValue = ul.nodeValue;	// 因为当前节点是ul元素，所以没有文本内容，显示的即为null

JavaScript中创建、克隆(复制)、追加及移除元素相关操作实例:

var li = document.createElement("li");	//创建一个li元素(此时只是存在于内存中，并未能被看到)
ul.appendChild(li);	// 将li添加至ul中，此时浏览器即能看到新添加的li元素了
ul.removeChild(ul.children[1]);	// 将ul下第二个li元素(下标从零开始计)移除掉，此时浏览器中即看不到该li元素，且内存中也被删除了
var firstLiNode = ul.children[0].cloneNode(true);	// 从ul中复制第一个元素至内存中, cloneNode有两个值: true和false。true即表示复制当前节点及其子节点内容，false表示只复制当前节点但是其子节点不复制。

走路的猫头鹰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生javascript操作DOM节点的相关方法

JavaScript原生操作节点的相关方法这几天无聊在用原生的js玩控制DOM节点操作，为方便今后用到不用重复去翻百度查资料，现将使用到的dom操作相关API进行记录:首先这里需要注明一个知识点:一般情况下DOM树结构对应如下:document 文档element 元素node 节点元素 DOM中一个标签...
复制链接

扫一扫