JS中的DOM初探

前言

文档对象模型(DOM) 将web 页面与到脚本或编程语言连接起来。 通常是指 JavaScript，但将HTML、SVG 或XML 文档建模为对象并不是JavaScript 语言的一部分。
直白的来说DOM可以用来操作html页面元素,实现更加精美的动画 或者样式改变

获取元素

在JS当中可以有以下几种常用方式来获取html元素

	var a1 = document.getElementById('tab'); //通过ID获取元素  不推荐使用
	var a2 = document.getElementsByClassName('title'); //通过类名获取元素
	var a3 = document.getElementByTagName('tab'); //通过标签名获取元素
	var a4 = document.querySelector('#tab'); //获取单个元素(参数为css选择器)
	var a5 = document.querySelectorAll('button>.tab'); 
	//获取全部符合条件的元素(参数为css选择器);

获取单个的元素基本上都是直接获取到属性,比如ID值或者querySelector
而其他都是返回一个元素类数组集合
想使用里面的元素 需要去用[0]来获取数组内单个元素
也可以在获取的时候直接获取单个比如

var a2 = document.getElementsByClassName('title')[0];
第一个元素

此时返回的是整个html页面内第一个类名叫title的标签

简单的元素操作

此时你获取的元素 全部都是原元素对象 既然是对象 那么就有属性值 和一些独特的方法

var a = document.querySelector('.tab');
	a.innerHTML = '1145114' //设置标签内文本内容
	a.style.color = 'red' //设置元素样式
	a.style.backgroundColor = '#ccc' //部分中间有'-'的属性可以用开头大写代替

节点类型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

一般地，节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也不相同;
odeType

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值.

元素节点            　　Node.ELEMENT_NODE(1)
属性节点            　　Node.ATTRIBUTE_NODE(2)
文本节点            　　Node.TEXT_NODE(3)
CDATA节点             Node.CDATA_SECTION_NODE(4)
实体引用名称节点    　　 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点        　　Node.ENTITY_NODE(6)
处理指令节点        　　Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点            　 Node.COMMENT_NODE(8)
文档节点            　 Node.DOCUMENT_NODE(9)
文档类型节点        　　Node.DOCUMENT_TYPE_NODE(10)
文档片段节点        　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点            Node.NOTATION_NODE(12)

nodeName

nodeName属性返回节点的名称

nodeValue

nodeValue属性返回或设置当前节点的值，格式为字符串