DOM树结构
绘制DOM树
<!doctype html>
<html>
<head>
<title>测试</title>
</head>
<body>
<!-- 测试 -->
<div>
hello, I'm come from Mars. <span style="color: #333;" name="itcast" itcast="HAHAHA">by--郑少女</span>哈哈
</div>
</body>
</html>需要注意的点
- html节点很特殊，html和head标签之间的text不属于html的子节点。
- 如果紧跟div标签后面的不是上面👆代码块中写的文本内容，而是标签，那么div和标签中间将有一个text子节点。
- “哈哈”和"</div>"之间就算有一个回车符，但是也只能算是一个text子节点。但是，如果把“哈哈”替换成“
”那么“
”和“</div>”之间有一个text子节点
任何一个DOM树结构
1、绘制DOM树：childNodes、attributes
2、从一个中心元素访问其所有的直系亲属元素
* 访问父元素： parentNode
* 访问上一个兄弟元素：previousSibling
* 访问下一个兄弟元素：nextSibling
* 访问第一个属性元素：attributes[1]
* 访问最后一个属性元素：lastChild 或 childNodes[childNodes.length-1]- 所谓的DOM操作，操作的是什么
答：操作的是DOM树，实现增删改查 - 一般DOM树结构
父节点
兄弟节点
当前节点
属性节点
子节点
兄弟节点查询，即获取元素
-
标准DOM API
document.getElementByIddocument.getElementsByTagNamedocument.getElementsByNamedocument.getElemensByClassNamedocument.querySelectorAll 功能强大，但是也许会有浏览器不兼容的情况存在
- 亲属访问
-
属性获取
getAttributegetAttributeNode
增加，先增加后加入
-
创建
document.createElement 创建元素document.createTesxtNode 创建文本节点document.createAttribute 属性节点innerHTMLinnerTextnode.cloneNode()
-
加入
appendChild 追加到结尾处innerHTMLinsertBefore 用法：将元素插入到某一个元素的前面 父元素.insertBefore(新元素, 旧元素);
-
其他
style 的操作setAttribute(属性名， 属性值)
删除
-
删除元素
removeChild 用法：父元素.removeChild()removeAttributeNode
修改
-
修改节点
删除节点再加入
-
修改样式
style.xxx = vvv;setAttribute
-
修改文本
innerHTMLinnerText节点操作nodeValue
-
修改属性
.xxx = vvvsetAttribute
操作属性的实例展示
- 增加属性节点
<script>
onload = function(){
var div = document.getAttributeNode('#dv')[0];
// 第一种方式 添加自定义的属性，非标准模式
div.setAttribute('newAttr', '新增的属性');
// 第二种方法 .xxx = vvv
div.className = 'newClass';
// 第三种方法 使用更安全，在前两个方法使用失效的情况下可用
var attr = document.createAttribute('newAttr2');
attr.nodeValue = '第三种增加属性的方式';
div.setAttribute( attr );
}
</script>
<body>
<div id="dv"></div>
</body>- 删除属性节点
<script>
onload = function(){
var ck = document.getAttribute('#ck')[0];
// 第一种删除的方法
ck.removeAttribute('checked');
// 第二种删除方法--对象的方式删除
var attr2 = ck.getAttributeNode('checked');
ck.removeAttributeNode( attr2 );
// 第三种删除方法
ck.chceck = false;
}
</script>
<body>
<input checked="checked" id="ck" />
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。