DOM对象

最新推荐文章于 2023-08-22 00:00:00 发布

Mrqin-shen

最新推荐文章于 2023-08-22 00:00:00 发布

阅读量316

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/qinshensx/article/details/104121724

版权

DOM对象

Dom节点

在浏览器中，Dom并不是顶级，顶层对象为window。Dom只是window下最常用的一部分。
Dom是文档中的最高点，html则是标签的顶端。
Dom节点包括了所有的标签、文本、属性。
通常情况下，将Dom节点大致分为5类：

Document 根节点 (文档节点)：整个文档树的顶层节点
Element 元素节点：网页的各种HTML标签（比如<body>、<a>等）
Attribute 属性节点：网页元素的属性（比如class=“right”）
Text 文本节点：标签之间或标签包含的文本，其中空格也算
Comment 注释节点：HTML或XML的注释

Document和Element是两个重要的DOM类。

在这里插入图片描述

父节点的获取方法

	// 先获取页面元素
	var ul_li = document.getElementsByTagName("li");
	
	//获取该节点的父节点
	console.log(ul_li[0].parentNode);
	
	//获取该节点的父 元素节点
	console.log(ul_li[0].parentElement);

子节点的获取方法

	// 获取该节点的子节点 ( 获取所有的子节点，不分类型 )
	console.log(ul[0].childNodes);
	
	// 获取并返回 该节点的 子元素节点数量
	console.log(ul[0].childElementCount);
    
    //获取到所有的子元素节点
	console.log(ul[0].children);
    
    //获取第一个子元素节点
	console.log(ul[0].firstElementChild);

	//获取第一个子节点
	console.log(ul[0].firstChild);

	//获取第一个子元素节点
	console.log(ul[0].firstElementChild);

	//获取最后一个子节点
	console.log(ul[0].lastChild);
			
	//获取最后子元素节点
	console.log(ul[0].lastElementChild);

兄弟节点的获取方法

	//获取该节点的下一个兄弟元素节点
	console.log(ul_li[0].nextElementSibling);

	//获取该节点的下一个兄弟节点
	console.log(ul_li[0].nextSibling);
			
	//获取该节点的 上一个兄弟元素节点
	console.log(ul_li[5].previousElementSibling);
			
	//获取该节点的 上一个兄弟节点
	console.log(ul_li[5].previousSibling);

操作元素节点

创建元素节点
注意：创建完成的元素，不在DOM树中，需要我们主动添加

	// 创建元素节点
	var li_new = document.createElement("li");
	var ul_li = document.getElementsByTagName("li");
	li_text = document.createTextNode("hello");
	li_new.appendChild(li_text);

添加元素节点
添加到的目标，一定是在页面中已经存在的

	// 目标.appendChild(内容)
	//appendChild ： 添加到目标里的最后一位
	ul[0].appendChild(li_new); // 给ul中添加一个子元素节点，它是li_new
	
	// 父节点.insertBefore(新的节点，已有的节点)
	ul[0].insertBefore(li_new,ul_li[0]);

删除元素节点

	//指定目标的父元素.removeChild(指定目标)
	ul[0].removeChild(ul_li[0]);
	
	//指定目标.remove()
	ul_li[0].remove();

替换元素节点

	//replaceChild： 替换元素节点
	//替换目标的父元素.replaceChild(新的元素,被替换的元素); 
	ul[0].replaceChild(meng,ul_li[0]);

克隆节点

	// 需要克隆的目标.cloneNode() 
	// 该方法会将克隆体返回
	var m_t = ul_li[0].cloneNode();
	m_t.innerHTML = "2333";
	console.log(m_t)

nodeName: 返回节点名称
nodeValue: 返回节点属性
nodeType: 返回节点类型

Mrqin-shen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM对象

DOM对象Dom节点在浏览器中，Dom并不是顶级，顶层对象为window。Dom只是window下最常用的一部分。Dom是文档中的最高点，html则是标签的顶端。Dom节点包括了所有的标签、文本、属性。通常情况下，将Dom节点大致分为5类：Document 根节点 (文档节点)：整个文档树的顶层节点Element 元素节点：网页的各种HTML标签（比如<body>、&...
复制链接

扫一扫