9.DOM

DOM的概念及作用

Document Object Model -- DOM

文档对象模型

DOM是针对HTML和XML文档的一个API（应用程序编程接口）。

DOM描绘了一个层次化的节点树，即HTML文档中的所有内容都是节点(node)。

DOM树中的所有节点均可通过JS进行访问，允许开发人员添加、移除、修改和查询页面的某一部分。

节点类型

整个文档是一个文档节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点(回车也是文本节点)

每个HTML的属性是属性节点

注释是注释节点

nodeType 属性：返回一个整数，这个数值代表节点的类型

元素节点返回 1

属性节点返回 2

文本节点返回 3

注释节点返回 8

文档节点返回 9

nodeName 属性：返回节点的名称

元素节点的 nodeName 是标签名称 ( 大写 )

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

注释节点的 nodeName 永远是 #comment

文档节点的 nodeName 永远是 #document

nodeValue 属性：返回节点的值

对于元素节点，nodeValue 返回值是 undefined 或 null

对于文本节点，nodeValue 返回文本内容

对于属性节点，nodeValue 返回属性值

对于注释节点，nodeValue 返回注释内容

对于文档节点，nodeValue 返回 null

对于元素节点，用 innerHTML／innerText / value 设置或取值

节点关系

节点之间的关系，通常用家庭中的辈分关系来描述。

祖先 -> 父辈 -> 子女(兄弟姐妹) -> 子孙

parentNode：父节点

children：所有是标签类型的子节点

childNodes：所有子节点

nextSibling：下一个兄弟节点

previousSibling：上一个兄弟节点

firstChild : 第一个子节点

lastChild：最后一个子节点

nextElementSibling

previousElementSibling

firstElementChild

lastElementChild

节点方法

createElement(“标签名”) : 创建元素节点

createTextNode(“”) : 创建文本节点

var newNode=document.createElement('div');

var textNode=document.createTextNode('文本内容');

appendChild(node) : 末尾插入一个节点node

insertBefore(node,target) : target之前插入节点node

removeChild(node) : 移除某个子节点

replaceChild(newNode,oldNode) : newNode替换oldNode

document.getElementById('');

document.getElementsByName('');

document.getElementsByTagName('');

document.getElementsByClassName('');

document.querySelector('');

document.querySelectorAll('');

cloneNode(boolean) : 复制一个节点

true：深复制，复制节点及其整个子节点树

false : 浅复制，只复制节点本身。

注：不会复制添加到DOM节点中的JS属性，例如事件处理程序等。

getAttribute(“name”) 获取节点上name属性的值

setAttribute(“name”,“value”) 设置节点上name属性的值为value

removeAttribute(“name”) 删除节点上的name属性

getAttributeNode(“type”) 获取节点上type属性节点

获取所有元素：

document.all // IE

document.getElementsByTagName('*')

获取元素样式

行间样式与非行间样式

行间样式：

console.log(box1.style.width);

非行间样式：

#box2 {width: 200px; height: 50px;}

console.log(box2.style.width);

getComputedStyle：获取非行间样式（IE678除外）

如：getComputedStyle(对象，参数).样式

第一个参数是要获取样式的元素对象

第二个参数可以传递任何数据，通常为false或null

currentStyle：IE678获取非行间样式的方法

如：obj.currentStyle.样式

offset/client系列属性

offsetLeft：获取对象左侧与定位父级之间的距离(默认是body)

offsetTop：获取对象上侧与定位父级之间的距离(默认是body)

offsetWidth：获取元素自身的宽度（包含边框）

offsetHeight：获取元素自身的高度（包含边框）

clientLeft、clientTop：获取元素内容到边框的距离，效果和边框宽度相同，很少使用

clientWidth：获取元素自身的宽度（不含边框）

clientHeight：获取元素自身的高度（不含边框）

document.documentElement.clientWidth 可视区宽度

document.documentElement.clientHeight 可视区高度

document.body.clientWidth body的宽度

document.body.clientHeight body的高度

document.documentElement.offsetWidth 整个文档宽度

document.documentElement.offsetHeight 整个文档高度

猜你喜欢