DOM

DOM （ Document Object Model ）：专门操作HTML内容的API
DOM是JavaScript的三个重要组成（ES(核心语法) DOM BOM）之一

核心DOM

能够操作所有结构化文档 （HTML，XML）
特点：万能的但是复杂而且繁琐

HTML DOM

专门操作HTML内容的API 常用的API进行简化
特点：简单但是并非是万能的

DOM Tree（节点树）

网页中一切在内存中都是以树形结构存储的
树形结构是存储上下级包含关系最直观的结构
HTML中的每一个元素（元素、属性、文本）都是一个节点对象（Node），其中document对象是整棵树的根节点

节点对象（Node）的三大属性

1、nodeType：专门区分节点的类型
document  ==>> 9
element  ==>> 1
attribute  ==>> 2
text  ==>> 3
2、nodeName：区分元素的名称
document  ==>> #document
element  ==>> 全大写的标签名
attribute  ==>> 属性名
text  ==>> #text
3、nodeValue：节点值
document  ==>> null
element  ==>> null
attribute  ==>> 属性值
text   ==>> 文本的内容

DOM操作：查、增、删、改

可以直接获得的三个元素

document.documentElement  ==>> <html>
document.head  ==>> <head>
document.body   ==>> <body>

节点树：包含HTML中的每一个节点对象

1、父子关系
node.parentNode //获得node的父节点
node.childNodes //获得node的所有子节点
node.firstChild //获得node下的第一个子节点
node.lastChild //后的node下最后一个子节点
2、兄弟关系
node.preivousSibling //获得当前节点的前一个兄弟节点
node.nextSibling //获得当前节点的下一个兄弟节点
//注意：网页中的一切都是节点，包括换行和空字符

用元素树：仅包含元素节点的树结构，节点树的子集

1、父子关系
elem.parentElement //获得一个父元素对象
elem.childen //获得子元素对象集合
elem.firstElementChild //获得第一个子元素对象
elem.lastElementChild //获得最后一个子元素
2、兄弟关系
elem.preivousElementSibling //获得当前节点的前一个兄弟元素
elem.nextElementSibling //获得当前节点的下一个兄弟元素

HTML查找

在整个页面或者父元素下，查找属性或标签符合条件的元素对象

id

只能用document调用 仅返回一个元素

var div = document.getElementById("box");
tagName

查找指定父元素下的指定标签元素，任何父元素都可以调用
返回值放在集合中，没有找到符合要求的子节点，返回一个空数组
查找不仅只查直接子节点，而且查找所有子代节点

var divs = document.getElementsByTagName("div");
var aLinks = div.getElementsByTagName("a");
name

查找表单，只能用document调用
返回一个动态数组

var form1 = document.getElementById("form1");
var chks = document.getElementsByName("sex");
class属性

查找的子代只要标签中class属性值符合要求的就被选中

var lis = nav.getElementsByClassName("active");