DOM基础

第一章:DOM概述

1.1DOM以及节点概念

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。

​ DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

img1

HTML文档可以说由节点构成的集合,DOM节点有:

  1. 元素节点:上图中、、

    等都是元素节点,即标签。

  2. 文本节点:向用户展示的内容,如

  3. 中的JavaScript、DOM、CSS等文本,即标签内部的纯文本.

  4. 属性节点:元素属性,如标签的链接属性href=”http://www.imooc.com",即标签的属性.

document节点是每个文档的根节点

document节点下面只有一个 html节点,我们称之为文档元素

(documentElement)文档元素是文档的最外层元素,其他元素都包含在文档元素中。

一个文档只能有一个文档元素,在html中文档元素永远是 <html>元素。

在DOM树中,html文档中每一处标记都可以用树中的一个节点来表示。

html(元素)标签,通过元素节点表示属性,通过属性节点来表示文档类型,通过文档类型节点来表示注释,通过注释类型来表示

1.2节点的属性(特性)

每一个节点都有三个特点:

​ 1.nodeName 节点名称(只读)

​ 2.nodeValue 节点值(设置或返回节点的值)

​ 3.nodeType 节点类型

1.nodeName:节点名称(nodeName 始终包含 HTML 元素的大写字母标签名) nodeName 是只读的

2.元素节点的 nodeName 与标签名相同

3.属性节点的 nodeName 与属性名相同(元素.getAttributeNode(“属性名”)获取属性节点)4.文本节点的 nodeName 始终是 #text(通过元素的子节点获取)

5.注释节点的nodeName是#comment(通过元素的子节点获取)

6.文档节点的 nodeName 始终是 #document

7.nodeValue:节点值 (设置或返回节点的值)

8.元素节点的 nodeValue 是 undefined 或 null

9.属性节点的 nodeValue 是属性值

10.文本节点的 nodeValue 是文本本身

11.注释节点的nodeValue是注释里面的内容

12.文档节点的nodeValue 是null

13.nodeType:节点类型

14.元素 element 1

15.属性 attr 2

16.文本 text 3

17.注释 comments 8

18.文档 document 9

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<p id = "p" class = "abc">您好</p>
<script>
var p = document.getElementById('p');
p.nodeName P
p.nodeValue null
p.nodeType 1 元素节点
var text = p.firstChild;
text.nodeName #text
text.nodeValue 您好
text.nodeType 3 文本节点
var attrNode = p.getAttributeNode("id");
attrNode.nodeName id
attrNode.nodeValue p
attrNode.nodeType 2 属性节点
</script>
</body>

第二章:document对象

2.1获取节点

1.getElementById(‘id名’)

​ 根据元素的id名来获取节点

IE5以下不兼容



我是span

评论