Dom(方法篇)

最新推荐文章于 2024-01-03 08:30:00 发布
最新推荐文章于 2024-01-03 08:30:00 发布
阅读量295 收藏
点赞数 1
分类专栏： JavaScript 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58242432/article/details/121968414
版权

理解：文档对象模型（Document Object Model）

目录

一，attributes

 二，nodeType

 三，nodeName

 四，nodeValue

 五 (一)，childNodes

 五 (二)，firstChild与lastChild

 六，parentNode

 七，previousSibling与nextSibling

 八，ownerDocument

 九，createElement()与createTextNode()

​

 十， appendChild()

 十一，insertBefore()与replaceChild()

 十二，removeChild()

注：本文只为方便本人记忆的总结如有建议敬请留言

一，attributes

理解：返回该元素节点的属性节点集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
		//attributes属性: 返回该元素节点的属性节点集合。
		console.log(box.attributes);
        console.log(box.attributes[0]);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

 二，nodeType

理解：返回获得的值，1为元素节点，2为属性类型，3为文本节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
		//nodeType  //1为元素节点，2为属性类型，3为文本节点 
        console.log(box.nodeType);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

 三，nodeName

理解：返回属性名称

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
		//nodeName  //属性名称 
        console.log(box.attributes["name"]);
        console.log(box.attributes["name"].nodeName);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

 四，nodeValue

理解：返回属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
		//nodeValue  //属性值 
        console.log(box.attributes["name"]);
        console.log(box.attributes["name"].nodeValue);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

 五 (一)，childNodes

理解：属性返回子节点集合（元素中的空格被视为文本，而文本被视为节点，可以使用 length 属性来确定子节点的数量）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
		//childNodes: 子节点集合
        console.log(box.childNodes);
        console.log(box.childNodes.length);
		console.log(box.childNodes[0]);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

 五 (二)，firstChild与lastChild

理解：firstChild=》用于获取当前元素节点的第一个子节点，相当于 childNodes[0]；

           lastChild=》用于获取当前元素节点的最后一个子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
		//firstChild 用于获取当前元素节点的第一个子节点，相当于 childNodes[0]；
		//lastChild 用于获取当前元素节点的最后一个子节点
        console.log(box.childNodes);
        console.log(box.firstChild);
        console.log(box.lastChild);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3></div>
	</body>
</html>

 六，parentNode

理解：属性返回该节点的父节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
		//parentNode 属性返回该节点的父节点
        console.log(box.parentNode);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3></div>
	</body>
</html>

 七，previousSibling与nextSibling

理解：previousSibling=》属性返回该节点的前一个同级节点

           nextSibling=》属性返回该节点的后一个同级节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var h = document.querySelector("#h");
        var p = document.querySelector("#p");
		//previousSibling 属性返回该节点的前一个同级节点
        console.log(p.previousSibling);
        //nextSibling 属性返回该节点的后一个同级节点
        console.log(h.nextSibling);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3 id="h">这是一个盒子</h3><p id="p">这是盒子里的p</p>
        </div>
	</body>
</html>

 八，ownerDocument

理解：属性返回该节点的文档对象根节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
		var box = document.querySelector("#box");
		//nextSibling 属性返回该节点的文档对象根节点
        console.log(box.ownerDocument);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

 九，createElement()与createTextNode()

理解：createElement()=》方法创建标签

           createTextNode()=》方法创建一个文本节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
		//createTextNode() 创建标签
		var s1 = document.createElement("span");
        console.log(s1);
        //createTextNode() 创建一个文本节点
		var txt1 = document.createTextNode("哈哈");
        console.log(txt1);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

 十， appendChild()

理解：方法将一个新节点添加到某个节点的子节点列表的末尾上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
		//createTextNode() 创建标签
		var s1 = document.createElement("span");
        //createTextNode() 创建一个文本节点
		var txt1 = document.createTextNode("哈哈");
        //appendChild()方法将一个新节点添加到某个节点的子节点列表的末尾上
        box.appendChild(s1);
        s1.appendChild(txt1);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
	</body>
</html>

 十一，insertBefore()与replaceChild()

理解：insertBefore​​​​​​​(newnode,existingnode)=》通过父节点调用,方法可以把节点插入到指定节点的前面（newnode：必需，需要插入的节点对象；existingnode：可选，在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode​​​​​​​）；

           replaceChild(newnode,oldnode)=》​​​​​​​通过父节点调用,方法可以把节点替换成指定的节点（newnode：必需，需要插入的节点对象；必需，您希望删除的节点对象）；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <style>
        #box,#box2{
        width:200px;
        height:200px;
        background:pink;
        margin-top:10px;
        }
        </style>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
        var box2 = document.querySelector("#box2");
        //createTextNode() 创建一个文本节点
		var txt1 = document.createTextNode("哈哈");
		var txt2 = document.createTextNode("呵呵");
		var txt3 = document.createTextNode("嘿嘿");
        //appendChild()方法将一个新节点添加到某个节点的子节点列表的末尾上
        box.childNodes[0].parentNode.appendChild(txt1,box.childNodes[0]);
        box2.childNodes[0].parentNode.appendChild(txt2,box2.childNodes[0]);
      	// replaceChild()通过父节点调用,方法可以把节点替换成指定的节点 	
        box2.childNodes[0].parentNode.replaceChild(txt3,box2.childNodes[3]);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
        <div id="box2" class="obox2" title="盒子2" name="mybox2">
			<h3>这是一个盒子2</h3>
		</div>
	</body>
</html>

 十二，removeChild()

理解：removeChild(node)=》通过父节点调用,方法可以删除指定子节点（node：必需，您希望删除的节点对象）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <style>
        #box,#box2{
        width:200px;
        height:200px;
        background:pink;
        margin-top:10px;
        }
        </style>
		<script type="text/javascript">
        window.onload = function(){
        var box = document.querySelector("#box");
        var box2 = document.querySelector("#box2");
        //createTextNode() 创建一个文本节点
		var txt1 = document.createTextNode("哈哈");
		var txt2 = document.createTextNode("呵呵");
        //appendChild()方法将一个新节点添加到某个节点的子节点列表的末尾上
        box.childNodes[0].parentNode.appendChild(txt1,box.childNodes[0]);
        box2.childNodes[0].parentNode.appendChild(txt2,box2.childNodes[0]);
      	// removeChild()通通过父节点调用,方法可以删除指定子节点 	
        box2.childNodes[0].parentNode.removeChild(box2.childNodes[3]);
        }
        </script>
    </head>
    <body>
		<div id="box" class="obox" title="盒子" name="mybox">
			<h3>这是一个盒子</h3>
		</div>
        <div id="box2" class="obox2" title="盒子2" name="mybox2">
			<h3>这是一个盒子2</h3>
		</div>
	</body>
</html>

注：本文只为方便本人记忆的总结如有建议敬请留言

野猪麦兜
关注
专栏目录
DOM事件探秘篇
01-19
把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，简单，跨浏览器的优势。 3.DOM2级事件处理程序。 （1）用于处理制定和删除事件处理程序的操作。 addEventListener（处理的事件名，事
原生JS DOM操作方法汇总
weixin_34405557的博客
01-09 707
创建节点 1. document.createElement(tagname) 创建一个由tagName决定的HTML元素 2. document.createTextNode(data) 创建一个文本节点，文本内容为data 3. document.createDocumentFragment() 创建一个空白的文档片段。文档片段是 DocumentFragment 对象的引用。是DOM节点，但...
常用的 DOM 方法
wgchen
04-08 1586
阅读目录HTML DOM 树问题DOM对象常用对象的方法和属性HTML文档中的常用节点类型常用的Document的方法Element常用的属性和方法Node常用的属性和方法DOM对象的常用方法示例1、document 对象2、location3、innerText，innerHTML4、Element 元素5、Element 创建和添加元素6、属性操作DOM 事件处理DOM0级事件处理DOM2级事件处理程序创建DOM节点、添加DOM节点、设置节点属性测试代码DOM中Event 对象使用获取鼠标哪个键的点击获
JS——DOM对象常用方法知识简记
TKY666的博客
05-01 3515
目录 获取DOM对象方法一 1.通过id获取 2. 通过class(类名)获取 3. 通过标签名获取 4. 通过name属性获取 5. 通过querySelector（选择器）获取 6. 通过querySelectorAll获取 获取特殊对象方法 body html 获取或返回元素内容方法 JS与CSS交互 js添加与修改属性样式 样式获取（查询） 类操作 DOM节点 节点属性操作 节点操作（增删复插替） 获取DOM对象方法二 节点查找 父节点查找子节点方法...
常用DOM的方法
ikEason_的博客
06-03 1596
1、createElement方法 创建一个新的元素（节点）。 语法：document.createElement(nodeName) 2、appendChild方法 插入新建的节点。 语法：parent.appendChild(child) 3、createTextNode方法 创建一个文本（节点）。 语法：document.createTextNode (text) 例如： var testdiv = document.getElementById (“testdiv”); var
JAVAScript基础学习--dom节点操作
weixin_47200160的博客
06-08 733
节点属性 1.childNodes 返回包含被选节点的子节点的 NodeList ​ 如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。 ​ 如需循环子节点列表，使用 nextSibling 属性，要比使用父对象的 childNodes 列表效率更高。 2.firstChild 返回被选节点的第一个子节点,如果选定的节点没有子节点，则该属性返回 NULL。 ​ 获取指定元素的第一个子节点，可以是元素节点，也可以是文本节点。 3.lastC...
JavaScript DOM节点操作方法总结
10-21
下面小编就为大家带来一篇JavaScript DOM节点操作方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解JS获取HTML DOM元素的8种方法
12-07
什么是HTML DOM 文档对象模型（Document ...JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClass
详解Python中DOM方法的动态性
12-25
在 上一篇专栏文章 中，某些样本中使用了样本 quotations.dtd 文件，并且这些文件可以与本文中的代码样本档案文件一起使用。 有必要了解 DOM 的确切含义。这方面，正式解释非常好：  “文档对象模型”是平台无关和...
jQuery为DOM动态追加事件的方法
10-20
下面小编就为大家带来一篇jQuery为DOM动态追加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nextsibling方法用法
最新发布
weixin_44627014的博客
01-03 528
在DOM（文档对象模型）中，是JavaScript提供的一种用于访问下一个同级节点（sibling）的方法。这个方法返回下一个同级节点，包括文本节点、元素节点等。方法是DOM中常用的节点遍历方法之一，它能够在同级节点中灵活定位和操作元素，为前端开发提供了便利。通过学习和理解的使用方法，我们可以更加高效地处理DOM操作，提升开发效率。
DOM nextSibling 属性
菜鸟的自我积累
06-26 545
前段时间做项目时使用dom的nextSibling获取不到自己想要的节点，但是换成jquery的next()可以获取。当时为了项目进度,解决问题后没有去深入研究下。今天得点小空，于是去查询了下资料。 JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev()，都是获取下一个/上一个同胞元素，如果下一个同级节点不存在，
DOM常用方法【DOM】
QQ1012421396的博客
08-20 1890
DOM方法：是我们可以在节点（HTML 元素）上执行的动作。 ①appendChild(Node newChild)     作用：为给定元素的最后增加一个子节点：                                           var newreference = element.appendChild(newChild).
DOM方法
洪布斯的博客
10-15 1105
DOM(document, object, model) 文档对象模型, 简称DOM; 浏览器在打开一个html页面之后，会针对html文件中的所有标签进行渲染，把每一个标签都解析成一个对象,这些对象以树形结构关联在一起，所以这种结构通常就叫做DOM结构，也就是所谓的DOM树,这些标签在解析过之后会将对象存储到document中，document是页面全体标签对象的一个集合，叫做文档对象模型; ...
关于dom元素的nextSibling的属性使用注意点
diandanbi4815的博客
03-23 156
　　博主在进行某次前端开发过程中，使用dom元素的nextSibling属性，用于获取下一个同辈元素，但是却得到非预期结果。代码片段如下 <!DOCTYPE html> <html> <body> <ul> <li id="Coffee">Coffee</li> <li id="Tea"...
DOM对象的常用方法
lesorb的专栏
01-21 1482
 DOM对象的常用方法2007-09-19 15:17由于DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是 按字母来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node and node),想学习DHTML中的DOM 千万不要从头到尾地
DOM的方法（操作）
LennieGao的博客
01-24 2669
好好学习 ，天天向上。Are you ready? DOM的增、删、查： 1、增---------createElement var oDiv = document.createElement(‘div’); document.body.appendChild(oDiv);//只有追加后，页面上才会出现 2、删---------removeChild 语法:fatherObj.removeChil...
DOM的结构和方法
qq_41371858的博客
12-25 3255
DOM:DOM是Document Object Model文档对象模型的缩写，根据W4C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件 D：文档 -html 文档 或 xml 文档 O:对象 -document 对象的属性和方法 M:模型 DOM是针对xml(html)的基于树的API DOM树：节点（node）的层次， DOM把一个文档表示...
关于DOM的方法有哪些？
manongN07的博客
11-10 402
获取HTML元素： （1）通过标签名获取DOM对象，注意得到的值是数组哟 document.getElementsByTagName("标签名"); （2）通过class属性值获取DOM对象，注意得到的也是数组哟 document.getElementsByClassName("class属性值"); （3）通过id获取DOM对象，得到是一个对象 document.getElementById("id属性值"); 改变HTML元素： （1）输出流 document.write(".
javascript学习这一篇就够了
11-14
另外，学习JavaScript还需要了解一些常用的内置对象和方法，比如String、Array、Date等对象，以及它们的属性和方法。掌握这些知识可以帮助我们更好地利用JavaScript提供的功能，实现更复杂的网页交互效果。 最后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值