首页 > 代码库 > JS--DOM

JS--DOM

2024-08-14 21:22:00   221人阅读

一、获取元素的样式
  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属性。

JS--DOM


联系
我们