Js节点

最新推荐文章于 2022-07-14 20:18:37 发布
最新推荐文章于 2022-07-14 20:18:37 发布
阅读量1.8k 收藏 22
点赞数 5
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： JS节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43885080/article/details/84675884
本文深入讲解了DOM中各种节点操作方法，包括获取指定节点、创建元素节点、插入、替换及删除节点等，提供了详细的代码示例，帮助读者掌握网页结构的动态修改技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

获取指定节点

代码用法
firstChild获取当前元素节点的第一个子节点
firstElementChild获取当前元素节点的第一个元素节点
lastChild获取当前元素节点的最后一个子节点
lastElementChild获取当前元素节点的最后一个元素子节点
ownerDocument获取该节点的文档根节点
parentNode获取当前节点的父节点
previousSibling获取当前节点的前一个同级节点
previousElementSibling获取当前节点的前一个同级元素节点
nextSibling获取当前节点的后一个同级节点
nextElementSibling获取当前节点的后一个同级元素节点
attributes获取当前元素节点的所有属性节点集合
childElementCount获取当前节点的元素节点的个数
children获取当前节点的所有元素节点

children返回的是数组；
children[0];用下标来寻找对应的节点

<script type="text/javascript">
        var div=document.getElementById('div');
        div.firstElementChild
    </script>

操作节点

方法说明
write()这个方法可以把任意字符串插入到文档中
createElement()创建一个元素节点:document.createElement(‘标签名’)
appendChild()将新节点追加到子节点列表的末尾:元素节点.appendChild(‘节点’)
createTextNode()创建一个文件节点:document.createTextNode(‘文本值’)
insertBefore(新节点,已有节点)可在已有的子节点前插入一个新的子节点:父节点.insertBefor(新节点,已有节点) ; old节点的父节点.insertBefore(new,old);
box.parentNode.insertBefore(p, box)在
之前创建一个节点
replaceChild()可将某个子节点替换为另一个:父节点.replaceChild(新节点,旧节点)
cloneNode()复制节点: 元素节点.cloneNode(Boolean);可选。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
removeChild()删除父节点下指定的子节点:父节点.removeChild(子节点)
JavaScript 创建新节点的方法
猿码互联
05-31 551
方法只是创建了一个新的节点对象，并未将其显示在页面上。要想在页面上显示该节点，还需要将其添加到某个已存在的节点中。方法来创建新的节点。该方法接受一个字符串参数，表示要创建的节点类型，如 "div"、"p" 等。可以对该节点进行操作，例如设置样式、属性或文本内容。方法，还可以使用其他方法将新的节点添加到其他节点中，例如。具体使用哪个方法取决于要实现的需求。下面是一个代码示例，演示了如何创建一个新的。在 JavaScript 中，可以使用。在上述示例中，首先使用。
JavaScript 节点介绍及其应用
流楚丶格念的博客
08-19 4362
文章目录节点节点的属性:获取方式属性包括节点理解探究实例探究1：节点探究2：节点属性探究3：亲戚节点应用案例：节点操作隔行变色节点的兼容代码 节点 元素:页面中所有的标签,元素—element, 标签----元素—对象 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node 根元素:html标签 节点的属性: 获取方式 可以使用标签——通过 元素+“.” 出来, 可以使用属性节点.——通过 文本节点+“.” 出来) 属性包括 nodeType:节点的类型: 1——
js获取节点
kingisking1的专栏
01-18 9527
var node=document.getElementById("??"); node.nodeName ○节点标签名 如:HTML/BODY/DIV/#text(文本节点名) node.nodeType ○节点类型 1(元素结点) 3(文本结点)
js的节点
m0_56621561的博客
12-15 1453
DOM树概念：DOM以树状结构出现的，方便开发人员获取，添加，删除和修改页面上的某一部分 DOM节点： DOM节点的概念：根据w3c，页面中的每一个部分都是一个节点， DOM节点的种类：节点包含一共有12种，本节课就认识5种节点 元素节点 属性节点 文本节点 注释节点 文档节点 DOM节点的获取 父节点.childNodes 获取父节点中所有的子节点 ...
js节点
流年
09-07 623
创建节点 createElement() var node = document.createElement(“div”); 没什么可说的，创建一个元素节点，但注意，这个节点不会被自动添加到文档（document）里。 2、创建文本节点 createTextNode() var value = document.createTextNode(“text”); 创建一个文本节点
js节点方法与介绍
FireflyLJW的博客
12-06 594
父节点:parentNode 兄弟节点:                  下一个兄弟:                         nextSibling   ie6 78 识别                         nextElementSibling 其他浏览器识别                兼容处理:  one.nextElementSibl
javascript 节点
09-06
### JavaScript 节点入门教程 #### 一、引言 在前端开发中，JavaScript 是一种广泛使用的编程语言，主要用于实现网页的动态效果与交互功能。JavaScript 的一个重要应用领域是操作DOM（Document Object Model，文档...
Javascript节点关系实例分析
01-21
本文实例分析了Javascript的节点关系。分享给大家供大家参考。具体如下： <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /&...
JavaScript节点及列表操作实例小结
12-11
本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下： （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建...
js 节点相关内容介绍 创建、删除、复制节点
phoebemeng的博客
07-14 1181
js 节点相关内容 ，创建节点，添加节点，删除节点，复制节点，下拉菜单案例，简单发布留言删除留言案例
JavaScript中访问节点对象的方法有哪些？
倔强的蜗牛
09-24 1796
JavaScript中访问节点对象的方法有哪些？ var obj = document.getElementById('fdafda'); var obj = document.f1; obj.method="post"; obj.action='Bb'; var obj = document.f1.userName; var obj = document.fo
js结点(dom)
Myair_AC的博客
09-01 368
1 . dom: document object model 文档对象模型； 2 . xml和html类似，加载到内存中会形成一颗树(树形结构),可以对该树进行操作： 3 . 测试hasChildNodes() 返回值是true/false 备注：元素中间没有任何内容包含空格 才算没有孩子var id01 = document.getE
js创建节点
Boke_的博客
06-21 461
window.onload = function(){ // 抓取元素 var box = document.getElementById("box"); // 添加点击事件 box.onclick = function(){ // 创建标签 // document.createElement('标签名（随便取）'); var h= document.createElement('s
[js] js操作节点的方法有哪些？
歌谣的博客
01-04 645
[js] js操作节点的方法有哪些？ 创建节点 createElement() 创建一个元素节点 createTextNode() 创建一个文本节点 createAttribute() 创建一个属性节点 createComment() 创建一个注释节点 插入节点 appendChild() 把节点插入到父节点的末尾 insertBefore() 把节点插入到父节点的某个兄弟节点的前面 删除节点 removeChild() 查找节点
JS-获取节点的方法
m0_63973769的博客
07-14 1444
lastElementChild最后一个子元素lastChild最后一个子节点。document.getElementById(查找速度最快)通过标签id获取。document.getElementsByName通过标签的name属性获取。parentElement获取父元素parentNode获取父节点。children获取子元素们childNodes获取子节点们。直接使用标签的id作为节点对象引用(不建议!获取这个元素是兄弟中的第几个。...
在js中添加新节点
weixin_30414155的博客
10-16 410
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=...
js节点属性用法
brid_fly的博客
06-10 864
|----replaceChild 替换节点|----小结：替换，删除，找父节点删（替换）子节点！insertBefore：移除:onMouseDown:当点击鼠标左键或右键的时候都会触发效果--onkeydown:  event(事件：ecmascript提供一套核心事件驱动) &lt;script&gt;          function abc(e){                ...
JavaScript中生成节点的方法
A_bowl_of_noodles的博客
04-27 399
有时候需要生成一些节点，我们可以利用JavaScript生成，在此展示生成表格的方法 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript"&gt; mytr=document.createElement('tr'
JS节点的属性及方法
front_end_fan
09-18 2445
前言学习了jquery等类库，可不能”忘本“，原生js才是它的根基。 ”但是前端技术发展到今天，如果你时常关注Github上一些流行的开源JS项目，你会发现这样一种趋势：开发者们越来越倾向于使用原生代码，而不依赖与第三方库。“一、属性Attributes 存储节点的属性列表（只读）childNodes 存储节点的子节点列表（只读）dataType 返回次节点的数据类型documen
JavaScript 节点操作详解
以下是一些关于JavaScript节点操作的关键知识点： 1. **节点属性**：每个DOM节点都有若干属性，如`attributes`用于获取节点的所有属性，它是一个只读的 NamedNodeMap 对象。`childNodes`属性则包含了节点的所有子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值