javaScript操作DOM
文档对象模型（Document Object Model, DOM）,在控制面板中用window.document获取
1.简单的html5页面元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaScript操作DOM</title>
</head>
<body>
<h1>Hello DOM</h1>
<p>
This<span>Hello javaScript</span>DOM
</p>
</body>
</html>2.对应的树状图，其中代表HTML元素的是Element节点，代表文本的节点是Text节点。
alt text
3.文档元素的选取
- 通过ID document.getElementById( )
- 通过名字document.getElementsByName( )
- 通过标签名document.getElementsByTagName( ) 快捷属性：document.images document.body document.head 等
- 通过CSS类名document.getElementsByClassName( )
- 通过CSS选择器：如（Sizzle） document.querySelectorAll( ) document.querySelector('.class')4.文档结构
- parentNode，该节点的父节点
- childNodes，该节点的子节点，类数组对象（NodeList对象）
- firstChild、lastChild，该节点的子节点的第一个和最后一个，如果没有则为null
- nextSibling、previousSibling，该节点的兄弟节点中的前一个和最后一个
- nodeType，节点类型
- nodeValue，节点的文本内容
- nodeName，元素的标签名5.属性的访问
- 标准HTML属性:style、href、textContent（文本内容）等等
- 非标准HTML属性：getAttribute()、setAttribute()、hasAttribute()、removeAttribute()
- 数据集属性（H5 dataset）6.节点的操作
- 创建节点 createElement() createElementNS() createTextNode()
- 复制节点 cloneNode()
- 插入节点 appendChild() insertBefore()
- 删除节点 removeChild()
- 替换节点 replaceChild() 7.事件操作
DOM0级事件处理程序
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
var btn = document.getElementById("mybtn"); // 取得该按钮的引用
btn.onclick = function () {
alert('clicked');
alert(this.id); // mybtn
}DOM2 级事件处理程序
DOM2 级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：
addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名，做为事件处理程序的函数和一个布尔值。最后这个参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 fasle，表示在冒泡阶段调用事件处理程序。
var btn = document.getElementById("mybtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
var btn = document.getElementById("mybtn");
var hander = function () {
alert(this.id);
};
btn.addEventListener("click", hander, false);
btn.removeEventListener("click", hander, false); // 有效7.阻止事件
阻止默认事件（a标签的跳转）
var samp = document.getElementByTagName("a");
samp.addEventListener("click", function (e) {
e.preventDefault()
}, false);阻止冒泡事件
document.getElementById('c3').addEventListener('click', function (e) {
e.stopPropagation()
}, false);本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录