JS--DOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS--DOM相关的知识,希望对你有一定的参考价值。

一、获取元素的样式
  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的主要内容,如果未能解决你的问题,请参考以下文章

js--原生js DOM操作(增删改差)

js DOM概述

JS DOM

js dom操作总结

[react] 同时引用这三个库react.jsreact-dom.js和babel.js它们都有什么作用?

JS--DOM