获取元素节点的子节点 & 获取文本节点
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 ...
随机推荐
- 请不要浪费你的生命，一文多发推广就用它(OpenWrite)
你我的共同困惑 你是否跟我一样?刚开始尝试写作,自己没有名气,有以下几个困惑: 想要推广自己,想在多个平台发文? 多平台发文之后,想要看各个平台的流量如何? 有了流量,想要引流用户到自己的网站? 网站 ...
- 《C程序设计语言》 练习2-1
问题描述 编写一个程序以确定分别由signed及unsigned限定的char.short.int及long类型变量的取值范围.采用打印标准头文件中的相应值以及直接计算两种方式实现 Write a p ...
- 2249: Altruistic Amphibians 01背包
Description A set of frogs have accidentally fallen to the bottom of a large pit. Their only means o ...
- boost在Qt中的使用
一.说明 理论上,Qt和boost是同等级别的C++库,如果使用Qt,一般不会需要再用boost,但是偶尔也会有特殊情况,比如,第三方库依赖等等.本文主要介绍boost在windows Qt(MinG ...
- 【Spark】如何用Spark查询IP地址？
文章目录 需求 思路 ip地址转换为Long类型的两种方法 ip地址转换数字地址的原理 第一种方法 第二种方法 步骤 一.在mysql创建数据库表 二.开发代码 需求 日常生活中,当我们打开地图时,会 ...
- 「从零单排HBase 10」HBase集群多租户实践
在HBase1.1.0发布之前,HBase同一集群上的用户.表都是平等的,大家平等共用集群资源.容易碰到两个问题: 一是某些业务较其他业务重要,需要在资源有限的情况下优先保证核心重要业务的正常运行 二 ...
- LabVIEW(数据库连接)
Driver={Microsoft Access Driver (*.mdb)}; Dbq=路径; Uid=Admin; Pwd=密码; 插入: INSERT INTO xs(学号,姓名,专业名,性别 ...
- [hdu1533]二分图最大权匹配 || 最小费用最大流
题意:给一个n*m的地图,'m'表示人,'H'表示房子,求所有人都回到房子所走的距离之和的最小值(距离为曼哈顿距离). 思路:比较明显的二分图最大权匹配模型,将每个人向房子连一条边,边权为曼哈顿距离的 ...
- 【c++ 重载】
重载"[]": #include <iostream> #include <string> using namespace std; struct Node ...
- 进程和线程—Python多线程编程
进程和线程 进程 进程是一个执行中的程序.每个进程都拥有自己的地址空间.内存.数据栈以及其它用于跟踪执行的辅助数据. 一个程序运行就是一个进程(比如 QQ.微信或者其它软件): 进程可以通过派生新的进 ...