JavaScript：DOM

目录

一、DOM介绍

1、节点和节点的关系

2、获取页面中的元素可以使用以下几种方式

3、鼠标点击事件

4、访问节点

5、获取元素的样式

---

一、DOM介绍

DOM：Document Object Model（文档对象模型）

DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用

程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。文档可以进

一步被处理，处理的结果可以加入到当前的页面。

DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的

API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中

处理。

1、节点和节点的关系

 文档:一个页面就是一个文档，DOM中使用document表示

元素:页面中的所有标签都是元素，DOM中使用element表示

节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

2、获取页面中的元素可以使用以下几种方式

1、根据ID获取

2、根据标签名获取

3、通过HTML5新增的方法获取

4、特殊元素获取

根据ID获取：

getElementById()可以获取带有ID的元素对象

1．因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面

 2. get获得element元素 by 通过驼峰命名法

3．参数id是大小写敏感的字符串

4．返回的是一个元素对象

5. console.dir打印我们返回的元素对象更好的查看里面的属性和方法console.dir(timer);

<div id="time">2019-9-9</div>
<script>
var timer = document.getElementById( 'time ' );
console.log(timer);
console.log(typeof timer);
console.dir(timer);
</script>

根据标签名获取：

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName ('标签名');

注意︰

1．因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。

2．得到元素对象是动态的

还可以获取某个元素(父元素)内部所有指定标签名的子元素.

element.getElementsByTagName ( "标签名");

注意:父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。

<script>
// 1.返回的是获取过来元素对象的集合以伪数组的形式存储的var lis = document.getElementsByTagName( ' li ' );
console.log(lis);
console.log(lis[e]);
l/ 2．我们想要依次打印里面的元素对象我们可以采取遍历的方式for (var i = e; i < lis.length; i++) {
console.log(lis[i]);
}
// 3．如果页面中只有一个li返回的还是伪数组的形式// 4．如果页面中没有这个元素返回的是空的伪数组的形式
// 5. element.getElementsByTagName('标签名'T);父元素必须是指定的单个元素l / var ol = document.getElementsByTagName( ol '); l/ [o1]
l/ console.log(ol[e].getElementsByTagName( 'li'));
var ol = document.getElementById( 'ol " );
console.log(ol.getElementsByTagName( 'li'));
</script>

通过HTML5新增的方法获取

1、根据类名返回元素对象集合

document.getElementsByClassName( '类名');

2、根据指定选择器返回第一个元素对象

document.queryselector ( '选择器');

3、根据指定选择器返回

document.querySelectorAl1('选择器');

<script>
// 1. getElementsByClassName根据类名获得某些元素集合
var boxs = document.getElementsByclassName('box');
console.log(boxs);
l/ 2. querySelector 返回指定选择器的第一个元素对象﹑切记里面的选择器需要加符号.box #navvar firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
//3. querySelectorAl1()返回指定选择器的所有元素对象集合
var allBox = document.queryselectorAl1('.box');
console.log(allBox);
var lis = document.queryselectorAll('li');console.log(lis);
</ script>

特殊元素获取

1、获取body元素

1. doucumnet.body //返回body元素对象

2、获取html元素

1. document.documentElement //返回html元素对象

3、鼠标点击事件

事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

4、访问节点

根据层次关系访问节点

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

节点信息

属性	说明
nodeName	根据节点的类型返回其名称
nodeValue	设置或返回节点的文本值
nodeType	属性值是一个只读属性，返回一个数字，表示当前节点的类型。

节点名称	nodeType
元素节点	1
属性节点	2
文本节点	3
注释节点	8
document文本节点	9
documentType节点	10
documentFragment节点	11

style属性

语法：

HTML元素.style.样式属性＝"值"

示例：

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

5、获取元素的样式

语法：

HTML元素.style.样式属性;(这个方法只能获取写在html标签中的style属性的值)

示例：

alert(document.getElementById("adver").style.top);

 语法：

document.defaultView.getComputedStyle(元素,null).属性;

示例：

var adverObj=document.getElementById("adver");
alert(document.defaultView.getComputedStyle(adverObj,null). top);

语法：

HTML元素. currentStyle.样式属性;

示例：

alert(document.getElementById(“adver").currentStyle.top);