JavaScript操作节点

最新推荐文章于 2023-05-10 18:13:39 发布
最新推荐文章于 2023-05-10 18:13:39 发布
阅读量200 收藏
点赞数
分类专栏： JavaScript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42539533/article/details/88685087
版权

操作dom节点

之前我们能取得的节点对象，但是仅仅是取得而没有做其他操作，那么我们也可以创建一个节点然后动态的插入到dom节点树种

创建一个文本节点

//获取div节点
var div=document.getElementsByTagName("div")[0];
//创建文本节点
var textNode=document.createTextNode("<p>文本节点</p>");
//将新创建的节点追加到div中
div.appendChild(textNode);

在这里插入图片描述
以上创建的是一个文本节点，所有p标签被当成一个普通文本输出，我们还可以创建元素节点追加

创建一个元素节点

//获取div节点
var div=document.getElementsByTagName("div")[0];
//创建元素节点
var elementNode=document.createElement("h1")
//为新建的元素节点增加文本内容
elementNode.textContent="为新建的元素节点增加文本内容";
//将新创建节点追加到div中
div.appendChild(elementNode);

在这里插入图片描述

插入节点的其他方法

插入节点不仅可以使用appendChild，还可以使用insertBefore实现

//获取div节点
var div=document.getElementsByTagName("div")[0];
//创建元素节点
var elementNode1=document.createElement("h1");
var elementNode2=document.createElement("h1");
//为新建的元素节点增加文本内容
elementNode1.textContent="使用insertBefore增加的节点";
elementNode2.textContent="使用appendChild增加的节点";
//将新创建节点追加到div中
div.insertBefore(elementNode1,document.getElementsByTagName("p")[0]);
div.appendChild(elementNode2);

在这里插入图片描述
使用insertBefore插入节点的时候需要两个参数，第一个参数是新的节点，第二个参数的插新节点的时候的参考（将新节点插入到第二个参数代表的节点之前）

使用appendChild则直接将新的节点作为最后一个子节点插入即可

删除节点

div.removeChild(document.getElementsByTagName("h1")[1]);

//获取div节点
var div=document.getElementsByTagName("div")[0];
//创建元素节点
var elementNode1=document.createElement("h1");
var elementNode2=document.createElement("h1");
//为新建的元素节点增加文本内容
elementNode1.textContent="使用insertBefore增加的节点";
elementNode2.textContent="使用appendChild增加的节点";
//将新创建节点追加到div中
div.insertBefore(elementNode1,document.getElementsByTagName("p")[0]);
div.appendChild(elementNode2);
//删除节点
div.removeChild(document.getElementsByTagName("h1")[1]);

在这里插入图片描述
该方法是由父节点调用的，可以删除指定的子节点，但是不能删除孙子节点

操作css样式

可以使用JS操作元素的css样式

<style>
			div{
				margin: 0 auto;
				height: 500px;
				width: 90%;
				background-color: pink;
				color: black;
			}
		</style>
	</head>
	<body>
		<center>
			<button type="button" onclick="changeColor('black')">夜间模式</button>
			<button type="button" onclick="changeColor('green')">护眼模式</button>
			<button type="button" onclick="changeColor('yellow')">黄昏模式</button>
		</center>
		<div>
			<p>第一段落</p>
			<p>第二段落</p>
			<p>第三段落</p>
		</div>
	</body>

JS代码

function changeColor(color){
	var div=document.getElementsByTagName("div")[0];
	div.style.backgroundColor=color;
}
慕北丶
关注
专栏目录
利用javascript操作页面节点
cxc3980的专栏
04-03 3102
1.访问节点：    a:getElementsByTagName():用于返回一个包含所有tanName（标签名）特性等于某个特定值的NodeList       如：var tagP=document.getElementsByTagName("p");              var tagImg=document.getElementsByTagName("img") 
JavaScript 节点操作
xihuanLilia的博客
02-13 451
节点操作节点概述​节点层级父级节点子节点所有子节点子元素节点第一个子节点最后一个子节点第一个元素节点最后一个元素节点常用兄弟节点下一个兄弟节点上一个兄弟节点创建节点添加节点删除节点克隆节点创建元素的三种方式document.write()innerHTMLcreatElement（） 节点概述​ 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 ​ HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改
JavaScript节点操作
Web_chicken的博客
10-11 3448
JavaScript节点操作 // 父级节点 var par = li.parentNode // 所有儿子节点 var all_child = li.children // 第一个(最后一个子节点) var fir = li.firstChild var las = li.lastChild // 第一个子元素(最后一个)节点 var fir_element = li.fi
javascript节点操作
新时光我好的博客
11-28 220
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;创建节点&lt;/title&gt;         &lt;style&gt;             div{                 widt
示例4：操作节点属性.rar_javascript操作节点属性
09-20
标题“示例4：操作节点属性.rar_javascript操作节点属性”表明我们将探讨如何修改和访问这些节点的属性。属性是元素的额外信息，例如`id`、`class`、`src`等。以下是一些常见的操作： 1. **获取属性值**：使用`...
纯JavaScript操作DOM节点
最新发布
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
JavaScript节点及列表操作实例小结
12-11
本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下： （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建...
JavaScript原生节点操作小结
10-20
在Web开发中，JavaScript用于操作DOM（文档对象模型）提供了丰富的API，原生节点操作是其中的基础。原生节点操作允许开发者直接对HTML文档中的元素节点进行创建、插入、删除和查询等操作。这种能力是动态网页交互...
JS节点操作
weixin_33860553的博客
04-17 142
一、六种JS插入节点的方式 innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement 今天介绍一下appendChild。 1.什么是节点 　　HTML文档中的所有内容都是节点： 　　1.整个文档时一个文档节点。 　　2.每个HTML元素是元素节点。 　　3.HTML元素内的文本是文本节点...
JavaScript-节点操作
qq_52822043的博客
03-22 1515
目录 ​ 1. 节点概述 2. 节点层次 1）父级节点 2）子节点 下拉显示菜单案例 3）兄弟节点 4）创建节点 ​ 简单版发布留言案例 5）删除节点 6）复制节点（克隆节点） 8）三种动态创建元素区别 1. 节点概述 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点用node来表示。 HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。 一般的，节点至少拥有n...
javascript之节点操作
n34886746的博客
06-01 225
javascript之节点操作 节点之间的关系图： Node：表示一个节点清单 NameNodeMap:表示一个无序列的节点列表 节点操作： 节点对象node 节点层次与关系 节点类型 节点操作 节点层次： 一个html文档可以分成许多个节点，节点有不同的类型：文档类型。元素类型。文本节点，注释节点等等 节点与节点之间形成层次结构，也就是文档节点树 节点DOM对象的类型是Node Node: Node接口是对节点的封装，继承自EventTarget,也就是所有的node节点u第项可以绑定事件 Node常
javascript 节点操作
m0_65804175的博客
05-10 164
2)把一个子节点(new)插入到另外一个节点(old)之前，父节点.insertBefore(new,old);//默认参数为true,一般情况下把一个节点放到另的地方去，都是移动，而不是复制，除非用cloneNode()方法。3.删除文本节点(文本节点属于子节点,与删除子节点方法相同)文档节点(节点名称=>#document,节点类型=>9)属性节点(节点名称，节点类型=>2，节点值)文本节点(节点名称，节点类型=>3，节点值)1.复制节点(克隆元素节点和文本节点)元素节点(节点名称，节点类型=>1)
Javascript节点的操作
MixedSignals的博客
04-08 262
什么是节点? 整个的HTML文件，其中的所有内容都视为HTML文件的一个节点对象，可以通过操作这些节点对象来操作HTML文件 起始节点操作就是另一种DOM操作，也是获取对象、操作对象，只是节点操作比DOM操作更加复杂更加丰富 节点的类型 之前的DOM操作只能获取标签对象，现在的节点操作不仅可以获取标签对象，也可以获取内容对象，还可以获取属性对象，甚至可以获取注释内容 通过节点获取的对象，和通过DO...
JavaScript 之 节点操作
a804847944的博客
08-30 183
一、文档树结构 　　　DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构。 　　　节点分为不同的类型，每种类型分别表示文档中不同的信息。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。 　　　节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。 　　　节点类型：元素节点、属性节点、文本节点、注释节点 　　　...
JS操作节点
weixin_33737774的博客
04-27 99
JS操作元素节点 　　使用 js 创建一个节点然后动态插入到 html 中. Demo: js 创建文本节点 1 //获取div节点 2 var div = document.getElementsByTagName("div")[0]; 3 //创建文本节点 4 var textNode = document.createTextNode("文本节点"); 5 //将新创建...
JavaScript 节点操作详解
6. **节点方法**：JavaScript提供了许多用于操作节点的方法。例如，`appendChild`可以在当前节点末尾添加新子节点。`cloneNode`用于复制节点，保持原有的属性和子节点。`createAttribute`、`createCDATASection`、`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值