js - DOM编程核心

前端APP 投稿 8100 0 评论

js - DOM编程核心

DOM 核心常用部分:

DOM方法

创建节点:createElement(,createTextNode(

复制节点:cloneNode(

插入节点:appendChild(,insertBefore

删除节点:removeChild(

替换节点:replaceChild(

查找节点:getAttribute(,getElementById(,getElementsByTagName,hasChildNodes

设置节点属性:setAttribute(

DOM属性

节点的属性:nodeName,nodeType,nodeValue

遍历节点树:childNodes,firstChild,lastChild,nextSibling,parentNode,previousSibling

下面给出这部分的简要用法,做个索引似帮助文档 

1.document.createElement("节点名":新建一个节点

2.document.createTextNode("文本内容":新建一个文本节点

3.节点.cloneNode(true|false:复制该节点,参数true则连同子结点一同复制,false则不复制子结点

4.节点.appendChild(子节点:在节点下添加子结点

5.父节点.insertBefore(新节点,参照点:在该父节点下的参照点前面插入新节点.通常父节点这样写:参照点.parentNode

6.父节点.removeChild(子结点:删除该父节点下指定的子结点,该子结点下的所有嵌套子结点都将被删除

7.父节点.replaceChild(新节点,旧节点:把该父节点下的指定子结点替换为新节点

8.节点.getAttribute("属性名":搜索指定节点的属性名,返回该属性的属性值

9.document.getElementById("id名":搜索文档中指定id名的节点,返回该节点对象

10.document.getElementsByTagName("标签名":搜索文档中指定标签名的节点,返回一个节点对象列表(数组, 基数从0开始,具有length属性,表示数组长度

11.节点.hasChildNodes:该节点是否具有子结点,有,返回true,没有子结点返回false(比如文本节点和属性节点

12.节点.setAttribute("属性名","属性值":为该节点添加属性,若该属性已经存在则刷新属性值

13.节点.nodeName:根据节点类型区分

元素节点:返回标签名(相当于tagName属性

文本节点:返回#text

属性节点:返回属性名

14.节点.nodeType:返回节点类型,常用有一下三种:

元素节点:返回1

属性节点:返回2

文本节点:返回3

15.节点.nodeValue:返回节点当前的值,根据节点类型区分:

元素节点:返回null

属性节点:返回属性值

文本节点:返回文本内容

16.节点.childNodes:返回该节点下的所有一级子结点(前面有具体介绍过,这个属性在不同浏览器有不同解释

17.节点.firstChild:返回该节点下的第一个子结点

18.节点.lastChild:返回该节点下的最后一个子结点

19.节点.nextSibling:返回该节点的下一个兄弟节点对象

20.节点.parentNode:返回该节点的父节点(肯定是一个元素节点,document节点的父节点为null

21.节点.previousSibling:和nextSibling相对,返回该节点的上一个兄弟节点对象

编程笔记 » js - DOM编程核心

赞同 (48) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽