JavaScript笔记：DOM

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

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

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

节点

     什么是节点呢？

     根据DOM,XML文档中的每一个成分都是一个节点

     整个文档是一个文档节点 document

     标签是一个元素节点      document.getElementsByTagName(“body”)  这就是一个body节点

元素中的文本就是一个文本节点

每一个属性是一个属性节点

注释是一个注释节点

点的获取

     知道了什么是节点，那么我们要用节点来进行相关操作，比如找到一个<h1>标签我们要给他增加属性，属性值，内容等，那么我们首先需要先找到这一个节点。

     同一个html页面内一个标签，属性，选择器可能存在多个，所以通过这些方式查找的内容通过一个类数组的方式放回，或者讲，只要有可能返回的是多个内容的可能，那么返回都是一个类数组来存这些内容，那么想要获得单个内容还得加上下标。

1、 通过标签名称来找节点。

var arr = document.getElementByTagName(“标签名”)[*];

2、 通过选择器获得节点

单个：var n = document.querySelector(“table>tbody tr:first-child>td:first-child”)

多个：var arr = document.querySelectorAll(“var n = document.querySelector(“table>tbody tr:first-child>td”)

”);

3、 通过id来获得节点

var abc = document.getElementById(“id名”);

4、 通过类名来查找节点

var arr = document.getElementsByClassName(“类名”);

5、 通过name属性值来查找，一般不使用

var arr = document.getElementByName(“name的属性值”);

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 ==>>
document.head ==>>
document.body ==>>
1
2
3
节点树：包含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”);
1
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”);