DOM结构知识点汇总

时间 2019-12-06

标签 dom 结构知识汇总栏目 HTML 繁體版

原文原文链接

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节点很特殊，html和head标签之间的text不属于html的子节点。
若是紧跟div标签后面的不是上面👆代码块中写的文本内容，而是标签，那么div和标签中间将有一个text子节点。
“哈哈”和"</div>"之间就算有一个回车符，可是也只能算是一个text子节点。可是，若是把“哈哈”替换成“
”那么“
”和“</div>”之间有一个text子节点

任何一个DOM树结构

一、绘制DOM树：childNodes、attributes
二、从一个中心元素访问其全部的直系亲属元素
  * 访问父元素： parentNode
  * 访问上一个兄弟元素：previousSibling
  * 访问下一个兄弟元素：nextSibling
  * 访问第一个属性元素：attributes[1]
  * 访问最后一个属性元素：lastChild 或 childNodes[childNodes.length-1]

所谓的DOM操做，操做的是什么
答：操做的是DOM树，实现增删改查
通常DOM树结构

父节点
  兄弟节点
  当前节点
    属性节点
    子节点
  兄弟节点

查询，即获取元素

标准DOM APInode
- document.getElementById
- document.getElementsByTagName
- document.getElementsByName
- document.getElemensByClassName
- document.querySelectorAll 功能强大，可是也许会有浏览器不兼容的状况存在
亲属访问
属性获取浏览器
- getAttribute
- getAttributeNode

增长，先增长后加入

建立安全
- document.createElement 建立元素
- document.createTesxtNode 建立文本节点
- document.createAttribute 属性节点
- innerHTML
- innerText
- node.cloneNode()
加入app
- appendChild 追加到结尾处
- innerHTML
- insertBefore 用法：将元素插入到某一个元素的前面父元素.insertBefore(新元素, 旧元素);
其余测试
- style 的操做
- setAttribute(属性名，属性值)

删除

删除元素spa
- removeChild 用法：父元素.removeChild()
- removeAttributeNode

修改

修改节点code
- 删除节点再加入
修改样式htm
- style.xxx = vvv;
- setAttribute
修改文本对象
- innerHTML
- innerText
- 节点操做
- nodeValue
修改属性
- .xxx = vvv
- setAttribute

操做属性的实例展现

增长属性节点

<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>