Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
一、nodeName 属性: 节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
获取所有LI标签，并输出相应节点的名称、节点的值、节点的类型：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var node = document.getElementsByTagName("li");
for(var i = 0; i < node.length; i++){
document.write("节点名称：" + node[i].nodeName + "<br/>");
document.write("节点的值：" + node[i].nodeValue + "<br/>");
document.write("节点类型：" + node[i].nodeType + "<br/>");
}
</script>
</body>
</html>
运行结果：
访问子结点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
代码如下:
运行结果:
IE:
UL子节点个数:3
节点类型:1
其它浏览器:
UL子节点个数:7
节点类型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7
如下图所示:
如果把代码改成这样:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
运行结果:（IE和其它浏览器结果是一样的）
UL子节点个数:3
节点类型:1
Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。
判断节点nodeType是否为1, 如是为元素节点，跳过。
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.firstChild
//与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.lastChild
//与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
找到指定元素(div)的第一个和最后一个子节点:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild.nodeName + "<br/>");
document.write(x.lastChild.nodeName + "<br/>");
</script>
</body>
</html>
访问父节点parentNode
获取指定节点的父节点
语法：
elementNode.parentNode
//父节点只能有一个。
获取 P 节点的父节点，代码如下:
<div id="text">
<p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>
运行结果:
parentNode 获取指点节点的父节点
DIV
访问祖节点:
elementNode.parentNode.parentNode
代码如下:
<div id="text">
<p>
parentNode
<span id="con"> 获取指点节点的父节点</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>
运行结果:
parentNode获取指点节点的父节点
DIV
浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
使用访问父节点parentNode，将"HTML/CSS"课程内容输出：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>流程控制语句</li>
<li>函数</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
document.write(tcon.parentNode.parentNode.parentNode.lastChild.innerHTML)
</script>
</body>
</html>
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling
//如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：
nodeObject.previousSibling
//如果无此节点，则该属性返回 null。
两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
} var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML); var y=get_nextSibling(x); if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML);
}else{
document.write("<br>已经是最后一个节点");
}
</script>
</body>
</html>
运行结果:
LI = javascript
nextsibling: LI = jquery
Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理的更多相关文章
- Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理
getAttribute()方法通过元素节点的属性名称获取属性的值.语法: elementNode.getAttribute(name) 1. elementNode:使用getElementById ...
- Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理
认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解 ...
- Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
- ＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
- 4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
随机推荐
- java下tcp的socket连接案例
package cn.stat.p4.ipdemo; import java.io.BufferedReader; import java.io.IOException; import java.io ...
- dom的element类型
1)getElementById 后面的nodeName和tagName都一样 var a=document.getElementById("my_div"); console.l ...
- 011_hasCycle
/* * Author :SJQ * * Time :2014-07-16-20.21 * */ #include <iostream> #include <cstdio> # ...
- 在sublime text 3中安装中文支持
1.安装package control 使用control+~打开终端,然后输入以下内容并确定: import urllib.request,os;pf='Package Control.subli ...
- ECSTORE1.2 重启开启信任登陆模块(删除KEY)
1).若启用Mongodb 需要删除KEY分别为 1 2 3 be90a668d9f2eb1950bae1bf6b0835ce 939e64939c3f65cfb646e7948c5b80df 58d ...
- Struts2学习笔记--Struts2的体系结构
1. Struts2体系结构 Struts是以前端控制器框架为主体的框架,用户的请求会通过控制器选择不同的Action类来执行具体的操作,在Action类中所有的Servlet对象(request.r ...
- Tomcat目录下的各个文件夹的作用
1.bin:存放各种不同平台开启与关闭Tomcat的脚本文件. 2.lib:存tomcat与web应用的Jar包 3.conf:存放tomcat的配置文件 4.webapps:web应用的发布目录,包 ...
- Gson 禁止特殊字符转码
Map<String,String> map = new HashMap<String,String>(); map.put("url", "&a ...
- 玩Linux桌面发现一个最佳的组合配置
其实前段时间玩Arch,其实不难,主要是太浪费时间配置折腾了,学到有用的东西太少,不能让我快速进入编程工作的状态,(真不知道有些人用Gentoo和Arch都能用出优越感了,就因为难安装和配置??)但是 ...
- Logstash 介绍
Logstash 介绍: Logstash 是一个开源的数据收集引擎具有实时管道能力, Logstash 可以动态的统一数据从不同的来源和使数据规范化到你选择的目的地. 当Logstash 起初驾驭创 ...