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
javascript7
DOM8
BOM9
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
javascript7
DOM8
BOM9
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 我是一个文本节点
