JS--DOM

Posted 2020-08-11

一、获取元素的样式

1. 非行间样式；
2. 行间样式。

1.currentStyle:

ie支持的获取非行间样式的方法；

用法：对象.currentStyle.样式名；

例：oDiv.currentStyle.width;

2.getComputedStyle:

除IE6、7、8外，获取非行间样式的方法；

用法： getComputedStyle(对象，参数).样式名；

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

例：getComputedStyle(oDiv,null).color;

二、什么是DOM

DOM是针对html和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

DOM树

DOM树中的所有节点均可通过JS进行访问，所有HTML元素（节点）均可被修改、创建或删除。

三、节点类型

HTML文档中的所有内容都是节点（node）：

• 整个文档是一个文档节点；
• 每个HTML元素是元素节点；
• HTML元素内的文本是文本节点（回车也是文本节点）；
• 每个HTML的属性是属性节点getAttributeNode(‘id‘);
• 注释是注释节点。

nodeName属性返回节点的名称：

• 元素节点的nodeName是标签名称（大写）；
• 属性节点的nodeName是属性名称；
• 文本节点的nodeName永远是#text;
• 文档节点的nodeName永远是document。

nodeValue属性返回节点的值：

• 对于元素节点，nodeValue返回值是undefined或null;
• 对于文本节点，nodeValue返回文本内容；
• 对于属性节点，nodeValue返回属性值;
• 对于元素节点，用innerHTML设置值/获取值。

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

常用的节点类型是：

元素节点 返回1；属性节点 返回2；文本节点 返回3；注释节点 返回8；文档节点 返回9。

 

四、节点关系

 

• childNodes: 所有子节点；
• nextSibling: 下一个兄弟节点；
• previousSibling: 上一个兄弟节点；
• firstChild: 第一个子节点；
• lastChild: 最后一个子节点；
• children: 所有是标签类型的子节点；
• parentNode: 父节点。

五、常见的操作节点的方法

1.查找方法：document.getElementById(‘‘);

document.getElementsByTagName(‘‘);

 

2.复制节点：cloneNode(boolean):复制一个节点

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

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

注意：cloneNode()方法不会复制添加到DOM节点中的javascript属性，例如事件处理程序等。

3.操作节点：

createElement(‘标签名‘): 创建新元素

createTextNode(‘‘): 创建文本节点

创建方法：document.createElement(‘div‘);

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

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

replaceChild(newNode, oldNode): new替换节点old;

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

getAttribute(‘name‘): 获取节点上name属性的值；

getAttributeNode(‘type‘): 获取节点上tape属性；

setAttribute(‘name‘,‘value‘): 设置节点上name属性的值为value;

removeAttribute(‘name‘): 删除节点上的name属性。