文档对象模型DOM

来源：互联网发布：php 角色权限管理系统编辑：程序博客网时间：2024/05/16 05:17

- 节点层次
  - Node类型
  - Document类型
  - Element类型
  - Text类型
  - Comment类型
- DOM操作技术
  - 动态脚本
  - 动态样式
  - 操作表格
  - 使用NodeList
  - 插入标记文本

节点层次

1.Node类型

除IE外，所有浏览器都可以访问到这个类型（Node接口）

//将类数组转化成数组Array.prototype.slice.call(nodeList,0);

nodename：元素的标签名

节点关系

children
parentNode
previousSibling
nextSibling

操作节点

appendChild()
insertBefore(新节点，参照节点)；新节点插入在参照节点前面
replaceChild(新节点，被替换节点)
removeChild(被删除节点)
node.cloneNode(true) 深复制node
node.cloneNode(false) 浅复制node

2.Document类型

document对象是HTMLDocument的一个实例，表示整个HTML页面，不是window对象的一个属性。

属性说明 document.documentElement 指向页面中的<html>元素 document.body 指向<body> 元素 document.title 指向<title>元素，可以修改页面标题 document.URL 获取页面完整的url document.domain 获取页面的域名 document.referrer 获取链接到当前页面的url，没有则为空

查找元素

方法说明 document.getElementById(‘box’) 获取id=’box’的元素 document.getElementByTagName(‘box’) 返回一个NodeList document.getElementByName(‘box’) 返回一个NodeList document.querySelector() 传入的参数确定是根据标签、id、class获取元素，返回第一个元素 document.querySelectorAll() 返回一个NodeList document.getElementByClassName(‘box’)

*表示全部

3.Element类型

HTML元素：具有id、title、lang、dir、className标准属性。

方法说明 getAttribute() 获取属性（包括自定义属性，style、onclick这样的事件处理程序除外），属性名不区分大小写 setAttribute() 设置属性，包括自定义属性，属性名不区分大小写 removeAttribute() 删除属性 document.createElement() 创建元素

attributes属性：常常用来遍历元素的属性

**自定义属性**data-，通过dataset属性来访问其值；

4.Text类型

纯文本类容，可以包含转义后的HTML，但不能包含HTML。

5.Comment类型

DOM中的注释

DOM操作技术

1.动态脚本

<script>元素动态加载外部javascript文件能立即执行

//动态创建脚本function loadScriptString(code){    var script = document.createElement('script');    script.type = 'text/javascript';    try{        script.appendChild(document.creatTextNode(node))    }catch{        script.text = code;    }    document.body.appendChild(script)}

3.动态样式

<link>包含外部的CSS样式
<style>包含嵌入式CSS

4.操作表格

table元素常用的属性

5.使用NodeList

插入标记/文本

属性说明 innerHTML 获取、修改调用元素的所有子节点的HTML标记 outerHTML 获取、修改调用元素的所有子节点的HTML标签（包括它本身） innerText 获取、修改调用元素的包含的所有文本内容 outerText 与innerText唯一的区别在于，在修改时会替换整个元素（包括它本身）

注意：innerHTML、outerHTML时最好先删除被替换元素的所有事件处理程序和javascript对象属性，否则可能浏览器会出现内存占用问题。

阅读全文

0 0