DOM

DOM

DOM是w3c的标准，它定义了访问html和xml文档的标准
在html中，所有的事物dom都视为节点，节点之间都有一定的层级关系
我们来看一下在dom标准下，html文档的关系结构（节点树）

我们可以通过js对dom进行访问
查找：
html，head，body不需要查找

节点间关系（节点树）
父子关系：
node.parentNode 获得node的父节点
node.childNodes 获得node的直接子节点
node.firstChild 获得node下的第一个子节点
node.lastChild 获得node下的最后一个子节点
兄弟关系：
node.previusSlibling 返回当前节点的前一个兄弟节点
node.nextSlibling 返回当前节点的后一个兄弟节点

元素间关系（元素树）
父子关系：
elem.parentElement 返回父元素对象
elem.children 返回子元素对象集合（IE8以下不支持）
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素对象
兄弟关系：
elem.previusElementSibling 返回当前元素的前一个兄弟元素
elem.nextElementSlibling 返回当前元素的后一个兄弟元素
查找符合要求的元素对象
1.通过id查找
document.document.getElementById();
2.通过标签名查找
document.getElementsByTagName();
3.通过name属性查找
document.getElementsByName();
4.通过class属性查找

DOM对html增删改查
访问html属性
修改属性
link.setAttribute(" ", " “);
删除属性
link.removeAttribute(” “);
判断是否存在属性
var bool = link.hasAttribute(” ");
console.log(bool); // true / false

也可以用简化的html DOM来访问
link.属性名
判断是否存在属性
link.title != “”;

一些常用的属性
标签置灰
disabled = true;
复选框被选中
checked

也可以通过style来直接获取或修改行内样式

添加：
通过DOM在html指定位置添加一个元素
实例：
//创建元素
var a = document.createElement(“a”);
//添加到body中（在父元素中追加元素，类似于数组中的push）
document.body.appendChild(a);
插入
div.insertBefore(span, strong);
在父元素div中的strong元素前面添加span元素
替换
div.replaceChild(new_div, i);
将div中已经存在的i元素替换为new_div元素

删除：
div.removeChild§;
通过父元素删除里面的子元素p
strong.remove();
删除strong元素