获取元素节点的子节点 & 获取文本节点
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 ...
随机推荐
- Linux文件删除空间未释放
当系统空间使用量过大需要清理空间或者清理某个文件时,有时会出现执行了删除命令之后磁盘空间并没有释放,很多人首次遇到该情况时会比较困惑,在考虑是不是像windows系统的回收站一样,删除只是逻辑删除到回 ...
- python操作ansible api示例
#!/usr/bin/env python # -*- coding:utf-8 -*- import json import shutil from collections import named ...
- andorid jar/库源码解析
前言 本篇作为开篇,会大体上说明,需要解读源码的,类库,或者jar. 序 原本,类库和jar的系列准备写到逆向系列课程的,但是那个东西,在写了两篇,就没有后续了,现在也不知道从哪里开始了, 只能等后期 ...
- Web 组态运用之用户数据 ARPU 分析图
前言 作为企业的发展,通过运营的有效管理,增加收入.降低成本,取得更好的经济效益,是核心所在,在电信企业同样如此.电信企业的利润大体上是由业务收入和成本决定的,而收入和成本又可进一步分别分解表达为不同 ...
- java基础篇 之 final关键字
final,字面上是最终的意思,通常来说,我们用它来作为修饰符的时候,都是代表"这是无法改变的"的意思.不想改变可能出与两种理由:设计或效率.由于这两个原因相差甚远,所以我们在 ...
- Coursera课程笔记----计算导论与C语言基础----Week 8
C语言中的运算成分(Week 8) 赋值运算符 "="赋值运算符 给赋值号左边的变量赋予数值 在变量定义的同时可以为变量赋初值 要点一:两面类型不同 若=两边的类型不一致,赋值时要 ...
- python工业互联网应用实战1—SQL与ORM
从sql到ORM应该说也是编程体系逐步演化的结果,通过类和对象更好的组织开个过程中遇到的各种业务问题,面向对象的解耦和内聚作为一套有效的方法论,对于复杂的企业应用而言确实能够解决实践过程中很多问题. ...
- 一个数组求其最长递增子序列(LIS)
一个数组求其最长递增子序列(LIS) 例如数组{3, 1, 4, 2, 3, 9, 4, 6}的LIS是{1, 2, 3, 4, 6},长度为5,假设数组长度为N,求数组的LIS的长度, 需要一个额外 ...
- srping mvc RequestMapping实现
spring mvc中定义请求的url只需要在方法上添加注解: @RequestMapping("aa.mvc")即可定义访问的url地址,但是你是否有考虑过为什么添加这个注解就可 ...
- ABP框架踩过的坑系列6
ABP框架踩过的坑系列6 应是无事.齐侯方才的确到了吴纠庭院https://www.mixcloud.com/ltTFvU888smi8jS/几日行军劳顿其实齐侯本应该睡下了https://www.m ...