DOM之firstChild、lastChild、ChildNodes、parentElement节点操作

最新推荐文章于 2024-10-15 00:15:00 发布
原创 最新推荐文章于 2024-10-15 00:15:00 发布 · 316 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #ViewUI

本文档通过实例展示了如何使用JavaScript来操作HTML文档对象模型（DOM），包括获取元素及读取其内容。通过不同的方法如getElementById来选择元素并进行各种操作。

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

....................................................................

<script type="text/javascript">
 var test_table = window.document.getElementById("test_table");
 var td_1 = window.document.getElementById("td_1");
 var td_2 = window.document.getElementById("td_2");
 var td_3 = window.document.getElementById("td_3");
 var td_4 = window.document.getElementById("td_4");

 var tdValue1 = td_1.firstChild.innerHTML;
 var tdValue2 = td_2.firstChild.innerHTML;
 var tdValue3 = td_3.firstChild.innerHTML;
 var tdValue6 = td_3.lastChild.innerHTML;
 var tdValue7 = td_3.childNodes[1].nodeValue;
 var tdValue4 = td_4.firstChild.innerHTML;
 var tdValue5 = td_4.innerHTML;
 window.document.write(tdValue1 + "<br />");
 window.document.write(tdValue2 + "<br />");
 window.document.write(tdValue3 + "<br />");
 window.document.write(tdValue4 + "<br />");
 window.document.write(tdValue5 + "<br />");
 window.document.write(tdValue6 + "<br />");
 window.document.write(tdValue7 + "<br />");
 window.document.write("<br />");
</script>

 

原文：http://www.verydemo.com/demo_c101_i88720.html

iteye_17799
关注
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
11-09 2291
DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。...
解析dom中的children对象数组元素firstChild,lastChild的使用
09-05
以下是对dom中的children对象数组元素firstChild,lastChild的使用进行了详细的分析介绍，需要的朋友可以参考下
html dom firstchild,DOM Node对象属性firstChild
weixin_35759767的博客
06-24 325
DOM Node对象属性firstChild指定节点的第一个子节点。语法以下是firstChild属性的使用语法。nodeObject.firstChild示例文件：node.xml 的内容如下 -SusenSu1584567890susen@yiibai.comMaxSu1334667898maxsu@yiibai.comMinSu1364562350minsu@yiibai.com以下示例演示...
html dom firstchild,HTML DOM firstChild 属性
weixin_42111465的博客
06-24 493
HTML DOM firstChild 属性firstChild只读属性返回指定节点的第一个子节点，作为一个Node对象。如果指定的节点没有子节点，则此方法将返回空值。元素内部的空白被视为文本，而文本被视为节点。注释也被视为节点。为了避免firstChild返回#text或#comment节点的问题，可以使用firstElementChild仅返回第一个元素节点。要返回指定节点的最后一个子节点，请...
javascript——DOM之firstChild,lastChild,NextSibling,previousSibling
weixin_34092370的博客
03-03 212
元素.firstChild : 只读 属性 第一个子节点 标准下：firstChild会包含文本类型的节点 非标准下：只包含元素节点 元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点 兼容标准和非标准浏览器的写法： HTML代码： <ul id="ul1"> <li>11111</li&g...
JavaScript--DOM-- firstChild 和lastChild 属性
norang的博客
06-05 732
4.4.6 firstChild 和lastChild 属性 数组元素childNodes[0] 有个更直观易读的同义词。无论何时何地， 只要需要访问childNodes 数组的第一个元素，都可以把它写 成firstChild ： node.firstChild 这种写法与下面的写法完全等价： node.childNodes[0] 这不仅更加简短，还更加具有可读性。 DOM还提供了一个与之对应的lastChild 属性： node.lastChild 这代表着childNodes 数组的最后一个元素。
深入理解JavaScript DOM操作：创建与复制节点
- `firstChild` 和 `lastChild`：分别返回第一个和最后一个子节点。 - `nextSibling` 和 `previousSibling`：获取当前节点的下一个或上一个兄弟节点。 这些基本操作构成了JavaScript DOM操作的核心，通过它们可以...
DOM节点介绍及获取节点的方式
YY的博客
10-20 1953
childNodes、children、firstChild、firstElementChild、lastChild、lastElementChild、previousSibling、previousElementSibling、nextSibling、nextElementSibling、 parentNode、parentElement、attributes、document.body()
原生JS之lastChild和lastElementChild、childNodes和children区别
骆小胖~
12-22 6340
（1）原生JS遍历时操作如下 childNodes 获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等） firstChild 获取第一个子节点（可以为注释节点） lastChild 获取最后一个子节点（与firstChild类似） parentNode 返回给定节点的父级节点 nextSibling 返回给定节点的下一个节点 previousSibling 返回给定节点的上一个节点 注意：上面写法是IE8之前旧版本写法，也可以在I
详谈DOM简介及节点、属性、查找节点的方法
11-26
遍历和操作节点主要通过以下属性： - `parentNode`：获取当前节点的父节点，最终的父节点是`document`。 - `childNodes`：获取父节点的所有子节点，包括元素、文本和注释。 - `firstChild` 和 `lastChild`：获取第...
arentNode和parentElement?childNodes和children功能一样?
蜗牛的编程路
12-22 569
<br /><script><br />function rdl_fnSwap(){<br />oList.children(2).swapNode(oList.children(1));<br />}<br /></script><br /><ul id = oList><br /><li>第1个列表项目<br /><li>第2个<a href="#" onclick="return false;">列表项目</a><br /><li style="font-weight:bold;">第3个列表项目<b
js DOM 慎用firstChild和lastChild
王先森的博客
11-13 4658
在确定某个元素下的firstChild和lastChild元素类型时，不要根据我们的想法认为他是什么元素类型。 例： 1.<div id="div1"> <div id="div2"></div> </div> <script> var oDiv=document.getElementById("div1"); var oDiv2=document.getElementB
JavaScript常用DOM API研究详解06：parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling
最新发布
qq_33546823的博客
10-15 1325
在DOM中，文档的每个部分都是一个节点（Node）。元素节点：如等标签。文本节点：元素或属性中的文本。属性节点：元素的属性（在现代DOM中，属性作为元素的部分，通过访问）。注释节点-- 注释内容 -->。parentNodechildNodesfirstChild< div id = " container " > < p > 第一段 < p > 第二段 < p > 第三段
18. Element firstChild 属性
enlyhua的专栏
08-06 852
实例返回文档的首个子节点：document.firstChild;<!DOCTYPE html> <html> <body><p id="demo">请点击按钮来获得文档首个子节点的节点名。</p><button onclick="myFunction()">试一下</button><script> function myFunction() { var x=document.getElementB
parentNode,parentElement,childNodes,children的区别
我的技术博客
10-11 3335
从字面上我们可以知道一个是parent的节点,一个是parent的元素,实际上在很多时候它们的返回的内容是相同的,比如有这么一段代码: 节点 item1 item i item ii item iii item2 item3    var item1 = document.ge
JavaScript-Dom的操作
wx112728的博客
04-24 1392
一、查看节点 1.查看元素节点 节点类型 返回值 元素节点 1 属性节点 2 文本节点 3 我们在进行判断节点类型时需要根据返回值进行判断，用来进行判断的语法： console.log(dom对象.nodeType); 获取节点的名称： console.log(a.nodeName); 获取节点的值： console.log(a.nodeValue); 二、根据父节点查找子节点 通过父节点对象查找子节点对象 缺点：可能会有文本节点；优点： 兼容性较.
parentNode,parentElement,childNodes,children最经典讲解
热门推荐
qq_36010298的博客
11-26 2万+
首先了解parentNode,parentElement,childNodes,children四大属性之前，必须对Dom树有一定的了解，在Dom文档结构中，HTML页面每一部分都是由节点组成的，节点的类型一共有3种，元素节点，文本节点，属性节点，从图中可以看出属性节点属于元素节点的分支，一般不常考虑， 下来详细介绍，childNodes，childern， childNodes指的是返
html dom firstchild,解析dom中的children对象数组元素firstChild,lastChild的使用
weixin_40004502的博客
06-24 369
行1列1 行1列2 行2列1 行2列2 alert(test.children[0].tagName)alert(test.children[1].tagName)document.all.tbl.children(0).children(0).innerHTML解释document.all.tbl.children(0)定位到table的第一个子节点document.all.tbl.c...
JS: lastChild innerHTML为undefined
qq_42689684的博客
03-25 768
问题描述 获取节点内容失败 <script type="text/javascript"> function checks(){ var tt=document.getElementById("myTable"); /*查找第二行第一个单元格内容*/ var s=tt.lastChild.innerHTML; alerrt(s); } </script> 原因...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值