获取元素节点的子节点 & 获取文本节点
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 ...
随机推荐
- 简单模拟实现Rxjs Observable
1.先定义类型 export type Observer = { next: (any) => void, complete?: (any) => void, } export inter ...
- aws mysql 开启慢查询日志, 并利用mysqlsla 分析
1.开启慢查询日志服务 (a) sql 查询配置 # 查看慢日志是否开启,开启为ON show variables like 'slow_query%'; show variables like 'l ...
- Shell脚本(二)数学运算
直接上代码. #!/bin/bash no1= no2= echo "using let ..." let result=no1+no2 echo "result is: ...
- ssrf爆破mysql
php ssrf 代码<?php $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $_GET['url']); #curl_setopt($ch ...
- 猫狗大战("简单的二维背包")
题面:https://www.luogu.com.cn/problem/P1489 看上去是一道简单的二维费用背包,但是要特别小心循环顺序. Ⅰ先循环物品,再循环限制条件. Ⅱ每一个限制条件都必须从后 ...
- 网络流 + 欧拉回路 = B - Sightseeing tour POJ - 1637
B - Sightseeing tour POJ - 1637 https://blog.csdn.net/qq_36551189/article/details/80905345 首先要了解一下欧拉 ...
- 完了！CPU一味求快出事儿了！
自我介绍 我叫阿Q,是CPU一号车间里的员工,我所在的这个CPU足足有8个核,就有8个车间,干起活来杠杠滴. 我所在的一号车间里,除了负责执行指令的我,还有负责取指令的小A,负责分析指令的小胖和负责结 ...
- Code::Blocks20.03 编译报错
Code::Blocks最近出了新版20.03,进入官网选择下载了附带MinGW版的安装包后,编译HelloWorld就报错(CB一直以来都有问题,新版还是这样...) 主要有两个问题: ld.exe ...
- Android ListView 代码1
目录 ListView效果 一.ListView的简单用法 二.定制ListView的界面 目标 步骤 1.定义一个实体类作为ListView适配器的适配对象. 2.为ListView的子项指定我们的 ...
- gets() 、 getchar() 、 getch() 、getche()、gets()、 scanf（）的区别
1.getchar().getche().getch() (1).getchar 函数用于从标准输入设备键盘读入单个字符,返回表示读入字符的ASCII码值,并在屏上显示该字符:头文件是 stdio.h ...