javascript DOM操作总结（上）

js组成：

1.ECMAscript语法标准（ES5 ES6）
2 BOM:Browser Object Model(浏览器对象模型)
3 DOM : Document Object Model (文档对象模型)

DOM

document代表整个文档 ，html是整个文档的根标签，DOM操作元素可以改变网页内容结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

节点类型：（六种）

节点类型	代表数字
元素节点	1
属性节点	2
文本节点	3
注释节点	8
document	9
DocumentFragment	11

如何获取页面中的元素

1通过id获取
document.getElementById("id名");//IE8以下不区分id的大小写，可以通过name属性进行匹配
2通过类名

document.getElementsByClassName("类名")[下标];//IE8及以下不兼容

3通过标签名

document.getElementsByTagName("标签名")[下标];//无兼容问题

4通过css选择器

<div class="div">
	<span>123</span>
	<span>456</span>
</div>
var span = document.querySelector(".div span");//css选择器  IE7及以下不兼容
console.log(span);//<span>123</span>只能找到符合条件的第一个
var all = document.querySelectorAll(".div span");
console.log(all);//[span,span]找到.div下所有的span

遍历元素节点 查看html文档

parentElement	父节点
children	子节点	IE9以下支持
firstElementChild	第一个子节点	IE9以不兼容
lastElementChild	最后一个子节点	IE9以不兼容
nextElementSibling	下一个节点
previousElementSibling	上一个节点
childElementCount	子节点数

操作元素

innerText和innerHTML的区别：

      				1	innerText不识别html标签
      				2	innerHTML识别html标签
      				3	两个属性都可读写，可获取元素里的内容

<div class="div">
	<span>123</span>
	<span>456</span>
</div>
var all = document.querySelectorAll(".div span");
all[0].innerText = "abc";
all[1].innerHTML = "abc";
all.style.color = "pink"//改变样式
all.className = "span"//改变属性
//class 因为和es中的class属性有冲突html中的class改名为className
console.log(all[0]);//<span>abc</span>
console.log(all[1]);//<span>abc</span>

执行事件的步骤

1.获取元素节点
2.绑定事件
3.添加事件处理程序（采用函数赋值的形式）

鼠标 input事件

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

DOM操作总结（下）文章链接