javascript中常用的节点方法

最新推荐文章于 2023-04-07 19:02:27 发布
最新推荐文章于 2023-04-07 19:02:27 发布
阅读量375 收藏
点赞数
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32914323/article/details/50718718
版权
1,追加元素
<html>
<head>
<title>appendChild</title>
<script type="text/javascript">
function f(){
var newEle = document.createElement("span");
var d = document.getElementById("t").lastChild;
document.getElementById("t").appendChild(d);
alert(document.getElementById("t").innerHTML);
}
</script>
</head>

<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div></div>
<button οnclick="f()">test</button>
</body>
</html>
2，克隆元素
<html>
<head>
<title>cloneNode</title>
<script type="text/javascript">
function f(){
var d = document.getElementById("t").cloneNode (true).innerHTML;

var m = document.getElementById("m");
m.innerHTML = d;
alert(m.innerHTML);
/*var d = document.getElementById("t").cloneNode (false).parentNode;
alert(d.attributes["name"].nodeValue);
var m = document.getElementById("m");
m.innerHTML = d;
alert(m.innerHTML);*/


}
</script>
</head>

<body id="body">
<div name="test">
<div id="t">Hello_world<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div>
</div>
<div id="m"></div>
<button οnclick="f()">test</button>
</body>
</html>
3，判断是否有子节点
<html>
<head>
<title>hasChildNodes</title>
<script type="text/javascript">
function f(){
var d = document.getElementById("t");
var sp = document.getElementById("sp");
document.write(d.hasChildNodes()+"<br/>");
document.write(sp.hasChildNodes()+"<br/>");

}
</script>
</head>

<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp"></span><span>bbb</span><span>ccc</span></div></div>
<button οnclick="f()">test</button>
</body>
</html>
4，插入节点
<html>
<head>
<title>insertBefore</title>
<script type="text/javascript">
function f(){
var newEle = document.createElement("span");
newEle.innerHTML = "EEE";
var d = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newEle,d);
alert(document.getElementById("t").innerHTML);
}
</script>
</head>

<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div></div>
<button οnclick="f()">test</button>
</body>
</html>
5，替换节点
<html>
<head>
<title>replaceChild</title>
<script type="text/javascript">
function f(){
var newEle = document.createElement("span");
newEle.innerHTML = "你好";
var oldEle = document.getElementById("t").lastChild;
var oldEle_ = document.getElementById("t").replaceChild(newEle,oldEle);
alert(oldEle);
alert(document.getElementById("t").innerHTML);
}
</script>
</head>

<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div></div>
<button οnclick="f()">test</button>
</body>
</html>
6，移除节点
<html>
<head>
<title>removeChild</title>
<script type="text/javascript">
function f(){
var d = document.getElementById("t").childNodes[1];
alert(d);
document.getElementById("t").removeChild(d);
alert(document.getElementById("t").innerHTML);
}
</script>
</head>

<body id="body">
<div name="test">
<div id="t">Hello_world!<span id="sp">aaa</span><span>bbb</span><span>ccc</span></div></div>
<button οnclick="f()">test</button>
</body>
</html>
java开发小白
关注
专栏目录
JS常用的节点操作和方法
weixin_44212397的博客
01-30 1068
Node>Document>documentElement>body>tagname 1.创建节点 我们常用的节点类型： 元素节点(标签) 属性节点(标签里的属性) 文本节点（文本节点） createElement() 创建元素节点。 appendChild() 把新的子节点添加到指定节点。 insertBefore(新的子节点,指定的子节点) 在指定的子节点前面插入新的子...
JavaScript中访问节点对象的方法有哪些如何使用
10-26
这是最常用的方法之一，它允许我们通过元素的id属性获取一个单独的DOM节点。id应当是唯一的，因为`getElementById()`会返回第一个匹配的元素。 ```javascript var obj = document.getElementById('fdafda'); ``` ...
javascript 节点
09-06
javascript 节点 描述 入门教程 入门指导
批量添加节点方法createDocumentFragment()方法 js创建元素节点，插入，删除，查找，替换元素节点的写法...
weixin_30892037的博客
03-10 494
js常见的创建dom节点的方法有 createElement() 创建一个元素节点 => 接收参数为string类型的nodename createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容 createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称 createComment() 创建一个...
JavaScript 之 节点操作
a804847944的博客
08-30 175
一、文档树结构 　　　DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构。 　　　节点分为不同的类型，每种类型分别表示文档中不同的信息。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。 　　　节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。 　　　节点类型：元素节点、属性节点、文本节点、注释节点 　　　...
javascript节点常用的一些方法
weixin_45936263的博客
07-08 292
文章目录节点的值属性**方法**节点操作其他 节点的值 对于元素节点，nodeType=1 对于文本节点，nodeType=3 对于属性节点，nodeType=2 对于注释元素，nodeType=8 对于文档元素，nodeType=9 属性 /* Attributes 存储节点的属性列表（只读） childNodes 存储节点的子节点列表（只读） dataType 返回次节点的数据类型 documentElement 返回文档的根元素（可读写） firstChild 返回
javascript读取文本节点方法小结
10-20
本篇文章主要对JavaScript中读取文本节点的方法进行了汇总和小结，下面将详细介绍相关的知识点。 1. DOM模型和节点类型 在了解如何读取文本节点之前，我们需要简单回顾一下DOM模型。DOM将HTML文档视为一个树形结构...
jQuery与JavaScript节点创建方法的对比
11-26
在网页动态交互中，创建和操作DOM节点是常见的任务，jQuery和JavaScript提供了不同的方式来实现这一目标。本文将深入探讨jQuery与JavaScript在创建节点方面的差异。 首先，理解DOM（Document Object Model）是至关...
javascript获取网页中指定节点的父节点、子节点的方法小结
01-19
用JavaScript获取这些节点的方法有很多种，下面是总结的一些方法. 1. 通过document节点获取： （1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果...
javascript中节点的最近的相关节点访问方法
12-11
在javascript中对文档中每个节点都有 parentNode——父节点 firstChild——第一个子节点 lastChild——最后一个子节点 previousSibling——紧挨着的前面的兄弟节点 nextSibling——紧挨着的后面的兄弟节点 五个相关...
js节点操作
03-22
NULL 博文链接：https://huanyq2008.iteye.com/blog/903799
Javascript节点
mengfanshaoxia的博客
02-16 1668
目录 Javascript节点 一、节点概述 二、节点属性 三、获取节点 3.1、获取父节点parentNode 3.2、获取子节点 3.2.1、所有子节点childNodes 3.2.2、子元素节点children 3.2.3、第一个节点firstChild 3.2.4、最后一个节点lastChild 3.3、获取兄弟节点 四、节点操作 4.1、创建节点 4.2、添加节点 4.3、复制节点 4.4、删除节点 4.5、修改节点 五、下拉菜单案例 六、动态生成表格案例 .
JavaScript——DOM
s310040799的博客
09-03 258
今天分享的是JavaScript中的重要组成部分DOM DOM 在浏览器标签中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”，使编程语言可以很容易的访问HTML结构 — 例如浏览器自己在呈现页面时，使用它将样式和其他信息应用于正确的元素，而页面呈现完成以后，开发人员可以用JavaScript操作DOM。 文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点。 元素节点: 一个元素，存在于DOM中。 根节点: 树中顶层节点，在HTML的情况下，总是一个HTML节点（其他标记词
JS节点（node）
知识点沉淀包括不限于前端
11-19 974
什么是节点： 页面中所有的东西都是节点，所有的节点都是对象 节点名 nodeType nodeName nodeValue 元素节点 1 大写的标签名 null 文本节点 3 ‘#text’ 文本的内容 注释节点 8 ‘#comment’ 注释的内容 文档节点 9 ‘#document’ null 元素节点就是页面中的标签 文本节点包括内容、空格、回车(换行)...
javascript节点
u012841667的专栏
10-21 246
节点 = 元素 = 每一个html标签 节点：文档节点、元素节点、属性节点、文本节点、注释节点 一、元素节点的属性 1)element.id：设置或返回元素的id 2)element.className：设置或者返回元素的类 3)element.title：设置或者返回元素的title 4)element.nodeType：返回节点的类型，1表示元素，2表示属性，3表示文本，
JavaScript节点
ting_wu的博客
03-17 160
JavaScript节点 节点关系 父与子：firstChild,lastChild,parentNode 兄弟之间：previousSibling,nextSibling 元素节点 子节点不一定只有"元素"节点，文本节点也属于节点 要注意空白文本也会被算作节点 只考虑元素节点(IE9支持) children, firstElementChild, lastElementChild previousElementsibling, nextElementSibling <div id="box"&gt
js常用的操作节点，猴子都能学会的方法
tjq11111的博客
11-25 961
个人理解： 首先要明白，节点分为：文字节点、元素节点、属性节点 1.创建元素节点 document.createElement("需要创建的元素节点名称") 2.创建节点之后，就需要将节点添加到文档里面 我们使用appendChild()把一个新元素插入到父元素的内部子元素的末尾 我们可以使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素的前面。 var div=document.createElement("div") inp.appendChild(div) .
JavaScript DOM节点操作方法总结
Mr_zhang的博客
03-21 793
节点类型主要有三种：元素节点，属性节点和文本节点。而对DOM的主要也就是围绕元素节点和属性节点的增删改查。下面就分别从对元素节点的操作和对属性节点的操作来介绍。元素节点在对DOM进行增删改之前，首先要找到对应的元素。具体的查找方法如下： getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList g...
JavaScript 关于节点(记录学习)
最新发布
qq_73451489的博客
04-07 1076
在DOM中，每个容器，独立的元素或文本块都被看作为一个节点，节点是W3C DOM的基本构建块。当一个容器包含另一个容器时，对应节点之间有父子关系(父节点，子节点)。同时该节点数遵循HTML的结构化本质，如<html>元素包含<head>、<boyd>,前者又包含<title>，后者包含各种块元素等。DOM中定义了HTML文档中6中相关节点类型。所有支持W3C DOM的浏览器(IE5+,Mozl和Safari等)都实现了前三种常见的类型，其中Mozl实现了所有类型。节点类型表节点类型数值节点类型附加说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值