JS加强学习-DOM学习03

7. 节点

7.1 节点的组成

.nodeType查看节点的类型(使用阿拉伯数字表示)

.nodeName查看节点的名字

.nodeValue查看节点的值

节点分成:标签节点、属性节点、文本节点、注释节点、文档节点。

标签的节点:

标签的节点类型:  1

标签的节点名字: 对应的标签名字

标签的节点值 :  null

文本的节点:

文本的节点类型:  3

文本的节点名字: #text

文本节点值:   对应的文本值,如果没有,就是空

属性节点:

属性的节点类型:  2

属性的节点名称: 对应的属性名称

属性的节点值:  对应的属性值

注释节点:

注释的节点类型:  8

文档节点:

文档的节点类型:  9

文档的节点名称: #document

文档的节点值:  null

注意:除文档节点外,每个节点都有父节点。大部分元素节点都有子节点。

7.2 获得父、子节点

7.2.1 获得父节点

parentNode:会直接获取对象的父级元素节点

7.2.2 获得子节点

childNodes:标准的DOM属性,获取子标签节点以外,还会获取子文本节点,但IE8中会忽略空白节点。

children:不是标准的DOM属性,但是所有的浏览器都支持,只会返回元素节点 。

7.3 获得同级节点

当节点分享同一个父节点时,它们就是同辈(同级节点)

nextSibling:获取对象下一个紧邻节点,不管下一个是否为空白文本节点,chrome 火狐都支持的,IE8及之前的浏览器会忽略空白文本节点,如果文本有内容也会获得到。

nextElementSibling:谷歌和火狐都可以获得下一个紧邻的元素节点,而IE8及之前的版本不支持

previousSibling:获取对象上一个紧邻节点,不管下一个是否为空白文本节点,chrome 火狐都支持的,IE8及之前的浏览器会忽略空白文本节点,如果文本有内容,也会获得到。

previousElementSibling:谷歌和火狐都可以获得下一个紧邻的元素节点,而IE8及之前的版本不支持。

时间: 2024-10-22 21:48:19

JS加强学习-DOM学习03的相关文章

JS加强学习-DOM学习01

JavaScript由三个部分组成:ECMAScript.DOM.BOM.前面已经学习了ECMAScript中的基础内容,现在可以开始学习DOM部分了,在DOM中更多的是实际效果的展现. 1. DOM定义 DOM:document object model 文档对象模型 它是将整个页面文档封装成了一个对象,并且这个文档对象由很多不同的节点组成. 节点包括三部分: 元素节点(标签节点).属性节点.文本节点. 2. 获取页面的方式 2.1 getElementById Id: document.ge

javascript(js)基础之dom学习

dom学习 <img id='xx'.. onclick='aa()'> functon aa(){ xx1=document.getElementById("xx") //下面对xx1进行操作 } bom介绍:浏览器对象模型 因为浏览器企业太多,w3c定义了一个做浏览器的规范 规定 ----------- dom介绍/学习:文档对象模型 dom树 例子 <script language="JavaScript"> function text

JS加强学习-DOM学习02

4. 获得或设置页面文本内容的方式 innerText innerHTML textContent 区别: 4.1 获取页面文本内容: innerText只获取标签间的文本信息,不包括其中的标签,而innerHTML是获得标签之间的所有内容包括标签,而且有些浏览器会将获取的内容原样输出,innerHTML是所有浏览器都支持,没有兼容性的问题,而innerText是IE8及早期的IE浏览器支持的,老版本火狐浏览器只支持textContent不支持innerText. 4.2 设置文本内容: inn

JS加强学习-DOM学习总结

1. DOM复习 DOM:document object model  文档对象模型或文档树模型. 1.1 节点分类 DOM中一共有5个节点类型,而现在我们常用的有三种:标签(元素)节点,属性节点,文本节点. 我们可以通过nodeType获取节点的类型(一个数字),通过nodeName获得节点名,通过nodeValue获得节点的值. 1.2 获得页面元素的三种方式 document.getElementById:通过标签的id值获得元素. document.getElementsByTagNam

JS加强学习-DOM学习05

7.6 移除节点   removeChild() 是将父元素中的某个子节点移除掉:这个为彻底移除. 7.7 插入节点   insertBefore 不同于appendChild(),appendChild()为将指定的元素剪切至对象所有子元素的最后.而insertBefore(,)是将指定的元素插入到某个位置之前,第一个参数为指定的元素,第二个参数为父元素中某个子元素的位置,指定元素会插入到第二个参数位置之前. 8. JS设置样式 8.1 JS设置样式的两种方式 style:逐条获取样式属性,逐

JS加强学习-DOM学习04

7.4 获取节点的属性兼容性 firstChild:获取父元素的第一个子节点谷歌,火狐都支持的,但是获得的不一定是元素节点,IE8及之前的版本会忽略空白文本. firstElementChild:获取父元素的第一个子标签节点,但是IE8及之前的版本不支持. lastChild:获取父元素的最后一个子节点谷歌,火狐都支持的,但是获得的不一定是元素节点,IE8及之前的版本会忽略空白文本. lastElementChild:获取父元素的最后一个子标签节点,但是IE8及之前的版本不支持. 像这种属性在不

PhotoSwipe.js 相册展示插件学习

PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一.使用这个组件需要引入两个js文件: 1 <script type="text/javascript" src="simple-inheritance.min.js"> 2 <script type="text/javascript"

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

HTML DOM 学习总结

DOM:核心DOM.XML DOM.HTML DOM 这里是对于HTML DOM学习的总结 --------------------------------------------------------------- 1.DOM介绍 DOM:Document Object Model,文档对象模型 如上图,元素.文本.属性三种节点作为叶子节点构成一颗树 通过可编程的对象模型,JS获得了足够的能力来创建动态的HTML,能改变页面中的所有HTML元素 各个节点之间存在着逻辑关系:parent.si