获取元素节点的子节点 & 获取文本节点
1. 获取元素节点的子节点(**只有元素节点才有子节点):
①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
②. firstChild 属性获取第一个子节点
③. lastChild 属性获取最后一个子节点
dom-getNode3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript">
//获取元素节点的子节点
window.onload = function() {
//1.获取city节点的所有子节点
var cityNode = document.getElementById("city"); //2.利用元素节点的childNodes方法可以获取指定元素节点的所有子节点，但是该方法不实用
alert(cityNode.childNodes.length);//9 //3.获取city节点的所有li子节点,这个实用的
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);//4 //4.获取指定节点的第一个子节点和最后一个子节点
alert(cityNode.firstChild);//[object Element]]
alert(cityNode.lastChild);//[object Text]] }
</script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br>
<br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br>
<br> name：
<input type="text" name="username" id="name" value="xiaoxiaolin">
</body>
</html>
2. 获取文本节点:
①. 步骤: 元素节点 --> 获取元素节点的子节点
②. 若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>
可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript">
//获取文本节点，文本节点一定是元素节点的子节点
window.onload = function() {
//1.获取文本节点所在的元素节点
var bjNode = document.getElementById("bj"); //2.通过firstChild定义到文本节点
var bjTextNode =bjNode.firstChild; //3.通过操作文本节点的nodeValue 属性来读写文本节点的值
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "我想去天安门"; }
</script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br>
<br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br>
<br> name：
<input type="text" name="username" id="name" value="xiaoxiaolin">
</body>
</html>
练习1：点击每个li节点都弹出其文本值
ex1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript">
//点击每个li节点都弹出其文本值
window.onload = function() {
//1.获取所有的li节点
var liNodes = document.getElementsByTagName("li"); //2.使用for循环遍历
for (var i = 0; i < liNodes.length; i++) {
//3.为每一个li节点添加onclick响应函数
liNodes[i].onclick = function() {
//4.在响应函数中获取当前节点的文本值, 打印
//this为正在响应事件的那个节点
alert(this.firstChild.nodeValue);
}
}
}
</script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br>
<br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br>
<br> name：
<input type="text" name="username" id="name" value="xiaoxiaolin">
</body>
</html>
练习2：点击每个li节点,若li节点的文本值没有^^开头,则加上,有则去掉
ex2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title> <script type="text/javascript">
// 点击每个li节点,若li节点的文本值没有^^开头,则加上,有则去掉
window.onload = function() {
//1.获取所有的li节点
var liNodes = document.getElementsByTagName("li"); //2.使用for循环遍历
for (var i = 0; i < liNodes.length; i++) {
//3.为每一个li节点添加onclick响应函数
liNodes[i].onclick = function() {
var val = this.firstChild.nodeValue
var reg = /^\^{2}/g;
if (reg.test(val)) {
val = val.replace(reg, "");
} else {
val = "^^" + val;
}
this.firstChild.nodeValue = val;
}
}
}
</script> </head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul> <br>
<br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul> <br>
<br> name：
<input type="text" name="username" id="name" value="xiaoxiaolin">
</body>
</html>
获取元素节点的子节点 & 获取文本节点的更多相关文章
- iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素
一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- jacascript DOM节点——元素节点、属性节点、文本节点
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...
- 初探JavaScript（一）——也谈元素节点、属性节点、文本节点
Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...
- 深入理解DOM节点类型第二篇——文本节点Text
× 目录 [1]特征 [2]空白 [3]属性[4]方法[5]性能 前面的话 文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点.该节点简单直观,本文将详细介绍该部分内容 特征 文本节点 ...
- jquery获取元素在文档中的位置信息以及滚动条位置（转）
jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接 原创 201 ...
- 『与善仁』Appium基础 — 22、获取元素信息的操作（一）
目录 1.获取元素文本内容 (1)text()方法 (2)get_attribute()方法 (3)综合练习 2.获取元素在屏幕上的坐标 1.获取元素文本内容 (1)text()方法 业务场景: 进入 ...
- Delphi 中的 XMLDocument 类详解(10) - 判断节点类型: 支节点、叶节点、文本节点、空节点
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
- javascript 获取元素样式的方法
javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div s ...
随机推荐
- nginx判定国家ip访问网站
我们可以通过GeoIP模块和MaxMind免费数据库来实现.MaxMind具有新版本的数据库GeoLite2,它仅支持CSV和mmdb格式.可以支持mngx_http_geoip2_modulemdb ...
- Linux服务器有大量的TIME_WAIT状态
我们经常会遇到在服务器上看到大量的TIME_WAIT,它们占用进程不释放,最后会导致所有进程数被耗完,服务器负载增高等生产事故,具体是什么原因导致的呢?我们先来看看TCP的三次握手四次挥手都是怎样的一 ...
- SpringBoot：整合SpringSecurity
目录 SpringSecurity(安全) 搭建环境 使用 用户认证和授权 注销及权限控制 记住我及登录页面定制 SpringBoot 整合 SpringSecurity: 用户认证和授权.注销及权限 ...
- spring boot项目中无法访问resources文件夹问题
如图,浏览器默认访问static文件下的内容,无法访问templates文件下的html文件. 解决方法: 在application.properties文件中添加静态资源目录的配置即可.
- crontab自动启动小任务例子(每一分钟将当前日期打入一个文件)
crontab -l #查看当前定时任务列表 显示没有,那么我们来安装一下(必须在root用户下) – yum install vixie-cron – yum install crontabs ...
- ASP.Net Core中使用Swagger
我们先简单介绍下什么是Swagger,主要是用来干嘛?? 在Swagger诞生之前,我们通常在开发接口的过程中,需要前后端共同维护一个接口文档,然后大家按照接口文档的规范进行对接.接口文档俨然成了接口 ...
- 装完B就跑，这几个Linux指令真的Diǎo
本文介绍一些有趣的指令,实用或者可以装逼,不妨自己也来试试看: 文章目录 1 故事的开局 2 杰哥的表演 2.1 sl 2.2 htop 2.3 gcp 2.4 hollywood 2.5 cmatr ...
- Java--ArrayList的遍历
三种遍历方式 一.for循环 二.for each 三.Iterator器遍历 Iterator it = list.iterator(); while(it.hasNext()){ syso(it. ...
- python机器学习笔记：EM算法
EM算法也称期望最大化(Expectation-Maximum,简称EM)算法,它是一个基础算法,是很多机器学习领域的基础,比如隐式马尔科夫算法(HMM),LDA主题模型的变分推断算法等等.本文对于E ...
- Hadoop2.8.1完全分布式环境搭建
前言 本文搭建了一个由三节点(master.slave1.slave2)构成的Hadoop完全分布式集群(区别单节点伪分布式集群),并通过Hadoop分布式计算的一个示例测试集群的正确性. 本文集群三 ...