JavascriptDom

dom—document ,objec,model (文档对象模型)

1
2
3
4
5
6
7
8
9
html元素是根节点

所有的 html 元素都称为 元素节点

所有元素节点的内容称为 文本节点(内容部分)

所有的元素节点的属性 称为 属性节点

一切都是节点

节点关系(查找 html 元素)

父节点: parentNode

兄弟节点:

previousElementSibling 前一个兄弟节点 – 高版本浏览器 previousSibling — 低版本浏览器 (后面所有的同理)

nextElementSibling 后一个兄弟节点 nextSibling

孩子节点:

firstElementChild 第一个孩子节点 firstChild

lastElementChild 最后一个孩子节点 lastChild

childNodes 孩子节点 得到是一个集合 使用时要用下标

children 孩子节点 得到一个集合 使用是要用下标

children 和 childNodes 区别:

children 操作的节点就是 元素节点

childNodes 会将标签后的回车作为 自己的 文本节点来操作

节点类型

1
2
3
4
5
6
7
8
9
10
11
元素节点 nodeType 值为 1

文本节点 nodeType 值为 3

属性节点 nodeType 值为 2

nodeType 节点类型

nodeName 节点名 (tagName 获取标签名)

nodeValue 节点值

节点动态操作(创建、 添加、删除)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1、创建一个新元素节点

document.createElement("节点名称");

2、添加创建的节点 appendChild()

父元素.appendChild(要添加的子元素)

3、创建一个文本节点

document.createTextNode("文本");

4、删除创建的元素 removeChild

父元素.removeChild( 要删除的子元素 );

5、添加创建的节点 insertBefore

父元素.insertBefore( 要添加的子元素,参照节点 );

向父元素的内容参照节点的前面添加一个新元素

注意:参数一定要写满两个,参照节点这个参数可以为null,如果参数为null,效果同appendChild

关于动态创建的元素添加事件问题

1
如果要给一个动态创建的元素添加事件,添加事件的代码必须和动态创建的代码在一个函数体内。如果写在函数体外部,需要用委托来实现。

本文标题:JavascriptDom

文章作者:Jonathon

发布时间:2018年11月21日 - 10:11

最后更新:2019年01月31日 - 14:01

原始链接:https://www.jonathon.cn/js2.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!