第十章 DOM
10.1节点层次
html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型。
10.1.1 Node类型
JavaScript中的所有节点类型都承自Node类型,因此所有节点类型都共享着相同的基本属性和方法
nodeType属性表明节点的类型
每个节点都有一个childNodes属性,保存着一个Nodelist类数组对象,可以使用Array.prototype.slice()方法将其转换为数组
parentNode属性指向文档树中的父节点
previousSbling、nextSibling
appendchild()向childNodes列表的末尾添加一个节点
inserBefore()把节点放在childNodes列表中某个特定的位置上,接受两个参数:要插入的节点和作为参照的节点
replaceChild()用于替换节点,接受两个参数:要插入的节点和要替换的节点
removeChild()这个方法接受一个参数即要移除的节点
cloneNode()接受一个布尔值参数,true时复制节点及其整整个子节点树,false时只复制节点本身
normlize()用于处理文档中的文本节点
10.1.2 Doucument类型
nodetype的值为9,nodename的值“#document”, nodevalue的值为null
document对象是window对象的一个属性
doucument的子节点可以是DocumentType、Element、ProcessingINstruction或comment
document.getElementsByTaName()、document.getElementsByName()会返回一盒HTMLCollection
10.1.3Element类型
nodetype的值为1, nodename的值为元素的标签名, nodevalue的值为null
访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性
if(element.tagName.toLowerCase()=="div"){}
Html中标签名始终是以大写输出的,Xml会与源码中一致
操作特性的DOM方法主要有getAttribute()、setAttribute()、removeAttribute(),这三种方法可以针对任何特性使用
第十章 DOM的更多相关文章
- JavaScript高级程序设计学习笔记第十章--DOM
1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...
- JAVASCRIPT高程笔记-------第十章 DOM对象
10.1.1 node类型 --除IE外 所有浏览器都可以访问到这个类型 :JS中所有的节点类型都继承自Node类型 nodeName 与nodeValue 如果是一个元素 那么nodeName中保 ...
- 第十章—DOM(0)—NODE类型
DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素, ...
- 第十章—DOM(一)——Document类型
DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...
- 读书笔记 - js高级程序设计 - 第十章 DOM
文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...
- 第十章—DOM(三)——Text类型
文本节点由TEXT类型表示,包含纯文本内容,Text节点具有以下特征: 看看下面的代码: div元素开始和结束标签只要存在内容,就会创建一个文本节点.可以使用以下代码来访问元素的这些文本子节点: 访问 ...
- 第十章—DOM(二)——Element类型
Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这 ...
- 第10章DOM笔记
第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a) app ...
- js-JavaScript高级程序设计学习笔记6
第八章 BOM 1.BOM的核心对象是window,他表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JS访问浏览器窗口的一个接口,又是ES规定的Global对象. 2.定义全 ...
随机推荐
- 关于ios使用jquery的on,委托事件失效
$('.parents').on("click",'.child',function(){}); 类似上面这种,在ios上点击"child"元素不会起作用,解决 ...
- 如何用Jupyter Notebook打开Spark
电脑已经装了anaconda python,然后下载了spark2.1.0.因为版本太新,所以网上和书上的一些内容已经不再适用.比如关于如何使用IPython和Jupyter,教程给出的方法是用如下语 ...
- Linux 如何解决 xhost: unable to open display ""
[root@host02 ~]# vncservice You will require a password to access your desktops. Password: Verify: x ...
- phpstrom 10 激活
随着 JetBrains 新版本的发布,注册机已然不行了.然而,道高一尺,魔高一丈.IntelliJ IDEA开源社区 提供了如下通用激活方法:注册时选择License server填写http:// ...
- 清空SQL Server数据库中所有表数据的方法(转)
清空SQL Server数据库中所有表数据的方法 其实删除数据库中数据的方法并不复杂,为什么我还要多此一举呢,一是我这里介绍的是删除数据库的所有数据,因为数据之间可能形成相互约束关系,删除操作可能陷入 ...
- Java实现购物车功能:方式一:存放在session中.方式二:存储在数据库中
//将购物车产品加入到cookie中,方式同浏览记录.Java实现购物车,方式一(简易版):存储在session中.这种方式实现还不严谨,大家看的时候看思路即可.(1). JSP页面中,选择某一款产品 ...
- vmware 修改IP 提示子网掩码错误~
我打开[编辑]->[虚拟网络编辑器]菜单 修改网络设置 提示 子网掩码错误 如下图所示 上网查询,使用如下方法解决问题 这个虚拟网络编辑器是给你添加网卡的,你添加vmnet1就是在你真实的电脑上 ...
- linux基础1——网络配置入门
1.IP地址配置 (1)临时IP更改 sudo ifconfig eth0 down 暂停接口 sudo ifconfig eth0 192.168.1.xx sudo ifconfig eth ...
- Java 之ThreadLocal 对应C#之ThreadStatic
java: public class JForumExecutionContext { private static ThreadLocal userData = new ThreadLocal(); ...
- 使用xpath的轴(Axis)进行元素定位
使用Xpath轴方式可依据在文档数中的元素的相对位置来进行定位,先找到一个相对好定位的元素,在根据与它相对位置来定位其他元素,可以解决一些元素难以定位的问题.今天学习了,写下笔记加深下印象 如家HTM ...