HTML5DOM红蓝盒子,DOM介绍以及使用方法(示例代码)

DOM的基本讲解

一、DOM

(Document Object Model)文档对象模型

1、有属性有方法

1 var person ={2 name:‘派大星‘,3 fav:function(){4 }5 }

2、js中对象分类三种

(1)用户定义对象

(2)内建对象 Array Date Math (内置)

(3)宿主对象

3、Model Map(地图)

(1)把 DOM 看做一颗“树”

(2)DOM 把文档看做一颗“家谱树”

1 parent child sibling(兄弟姊妹)2 爷爷3 爸爸 叔叔4 你 弟弟 表兄弟

节点以及使用方法

一、DOM中的节点

1、元素节点(element node)

2、文本节点(text node)

3、属性节点(attribut node)

注意：没有内容的文档是没有任何价值的，而大多数内容都是由文本提供

二、获取元素节点对象的方式

1

选择你的课程

2 web全栈，请放心购买

3

4 html

5 css

6

javascript

7

DOM

8

BOM

9

1、document.getElementById() 获取单个对象

1 var eleNode = document.getElementById(‘classList‘);2 console.log(eleNode);//以id获取到

3 console.log(typeof eleNode);

2、document.getElementsByTagName() 获取节点对象集合

1 var olis = document.getElementsByTagName(‘li‘);2 var oTitle = document.getElementsByTagName(‘h2‘);3 console.log(oTitle[0]);//只有一个，所以只获取出来一个

4 console.log(olis.length);//5,5个li

5 for(var i = 0;i

7 }8 console.log(typeof olis);

3、document.getElementsByClassName() 相对于2可以针对性的获取节点对象集合

1 var oItems = document.getElementsByClassName(‘item‘);2 console.log(oItems);//一个集合

3 console.log(oItems[0]);//索引取出来的值

三、设置属性和获取属性

css

#box{color:red;

}

html

1

选择你的课程

2 web全栈，请放心购买

3

4 html

5 css

6

javascript

7

DOM

8

BOM

9

1、getAttribute()获取属性值，有一个必须参数，(这个节点对象的名字)

1 //通过名字来查找

2 var title = oP.getAttribute(‘title‘);3 var className = oP.getAttribute(‘class‘);4 console.log(title);//有这个对象，返回对象值

5 console.log(className);//没有这个对象，返回null

2、setAttribute() 设置属性值

1 oP.setAttribute(‘id‘,‘box‘);//添加了一个id，

2 oP.setAttribute(‘class‘,‘active‘);//添加了一个class，

四、节点对象的三个重要属性

1、nodeName属性：节点名称，是只读

(1)元素节点的nodeName与标签名相同

(2)属性节点的nodeName与属性的名称相同

(3)文本节点的nodeName永远是 #text

(4)文档节点的nodeName永远是 #document

(5)注释节点的nodeName永远是 #comment

2、nodeValue属性：节点的值

(1)元素节点的nodeValue是 undefined 或 null

(2)文本节点的nodeValue是文本本身

(3)属性节点的nodeValue是属性自身

3、nodeType属性：节点的类型，是只读

以下常用的几种节点类型

1 元素类型： 节点类型：2

3 //元素 1

4

5 //属性 2

6

7 //文本 3

8

9 //注释 8

10

11 //文档 9----不算

4、获取三种重要属性的方法

1 我是一个文本节点