js:DOM及其操作

DOM的概念

文档对象模型（Document Object Model，简称DOM）

在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM

DOM又称为文档树模型

 

• 文档：一个网页可以称为文档
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
• 元素：网页中的标签
• 属性：标签的属性

DOM操作

获取页面元素

想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操

1. 根据id获取

　　var div = document.getElementById('main');
　　console.log(div);
​
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element <-- Node <-- EventTarget

1. 根据标签名获取

var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {

 var div = divs[i];

 console.log(div);

}

2.根据name获取

var inputs = document.getElementsByName('hobby');

for (var i = 0; i < inputs.length; i++) {

 var input = inputs[i];

 console.log(input);

}

3.根据类名获取元素

var mains = document.getElementsByClassName('main');

for (var i = 0; i < mains.length; i++) {

 var main = mains[i];

 console.log(main);

}

4.根据选择器获取元素

var text = document.querySelector('#text');

console.log(text);

​

var boxes = document.querySelectorAll('.box');

for (var i = 0; i < boxes.length; i++) {

 var box = boxes[i];

 console.log(box);

}

 

三个元素不需要可以直接获得

(html)document.documentElement

(head)document.head

(body)docunment.body

 

节点之间的关系

1）        父子关系

node.parentNode获得node的父节点

node.childNodes获得node的子节点

node.firstChild获得node下的第一个子节点

node.lastChild获得node下的最后一个子节点

2）        兄弟关系

node.preivousSibling 返回值为当前节点的前一个兄弟节点

node.nextSibling 返回当前节点的下一个兄弟节点

EG:

1）父子关系
elem.parentElement 返回一个父元素对象
elem.childen IE8支持 返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素
2）兄弟关系
返回当前节点的前一个兄弟元素
elem.preivousElementSibling
返回当前节点的下一个兄弟元素
elem.nextElementSibling