JavaScript操作dom总结
最近一直忙于新项目,真的挺费心的 从产品原型、ui、接口、真心挺费心的。好多地方都不完善!(i want say F word!!)
基础的东西又需要重新看看了!
Node
Node.NodeType 节点的类型
1 // element 元素节点
2 // attribute 属性节点
3 // text 文本节点
8 // comment 注释节点
9 // document文档节点
10 // DocumentType节点
11 // DocumentFragment节点
Node.nodeName 元素标签名
P SCRIPT BUTTON 如果是标签都是大写,如果是文字返回#text
Node.tagName 标签名
P BUTTON SCRIPT 如果是文字返回undefined
Node.nodeValue 属性设置或返回指定节点的节点值
用标签包裹的返回null
Node.parentNode 形式返回指定节点的父节点
Element类型
Element提供了对元素标签名,子节点和特性的访问,我们常用HTML元素比如div,span,a等标签就是element中的一种。Element有下面几条特性:
(1)nodeType为1
(2)nodeName为元素标签名,tagName也是返回标签名
(3)nodeValue为null
(4)parentNode可能是Document或Element
(5)子节点可能是Element,Text,Comment,Processing_Instruction,CDATASection或EntityReference
Text类型
Text表示文本节点,它包含的是纯文本内容,不能包含html代码,但可以包含转义后的html代码。Text有下面的特性:
(1)nodeType为3
(2)nodeName为#text
(3)nodeValue为文本内容
(4)parentNode是一个Element
(5)没有子节点
Attr类型
Attr类型表示元素的特性,相当于元素的attributes属性中的节点,它有下面的特性:
(1)nodeType值为2
(2)nodeName是特性的名称
(3)nodeValue是特性的值
(4)parentNode为null
Comment类型
Comment表示HTML文档中的注释,它有下面的几种特征:
(1)nodeType为8
(2)nodeName为#comment
(3)nodeValue为注释的内容
(4)parentNode可能是Document或Element
(5)没有子节点
Document
Document表示文档,在浏览器中,document对象是HTMLDocument的一个实例,表示整个页面,它同时也是window对象的一个属性。Document有下面的特性:
(1)nodeType为9
(2)nodeName为#document
(3)nodeValue为null
(4)parentNode为null
(5)子节点可能是一个DocumentType或Element
Node.NodeList
NodeList 对象都是个实时集合, 如果节点数发生变化,对象NodeList也可能变化
NodeList不是数组
var childNodes = document.body.childNodes;
console.log(childNodes.length); // 如果假设结果是“2”
document.body.appendChild(document.createElement('div'));
console.log(childNodes.length); // 此时的输出是“3”
节点的查找
document.getElementById('demo')
根据ID查找元素,大小写敏感,如果有多个结果,只返回第一个
document.getElementsByClassName('red blue')
根据类名查找元素,多个类名用空格分隔,返回一个HTMLCollection
document.getElementsByTagName('span')
根据标签查找元素,*表示查询所有标签,返回一个HTMLCollection
document.getElementsByName('name')
根据元素的name属性查找,返回一个NodeList
document.querySelector('.class')
根据css选择器 匹配到多个的时候返回第一个
document.querySelectorAll('.class')
根据css选择器 匹配到返回NodeList
document.forms
返回当前文档中的 元素的一个集合,返回一个HTMLCollection
节点的创建
document.createElement('div')
创建元素,它只是创建出来,并未添加到html文档中,要调用appendChild
或insertBefore
等方法将其添加到HTML文档中。
document.createTextNode('我是文本')
创建文本节点
var node = document.createTextNode('我是文本')
document.body.appendChild(node)
cloneNode 克隆一个节点
克隆一个节点:node.cloneNode(true/false),它接收一个bool参数,用来表示是否复制子元素。
克隆节点并不会克隆事件,除非事件是用<div onclick="test()"></div>
这种方式绑定的,用addEventListener
和node.onclick=xxx;
方式绑定的都不会复制。
var from = document.getElementById("test");
var clone = from.cloneNode(true);
clone.id = "test2";
document.body.appendChild(clone);
createDocumentFragment
本方法用来创建一个DocumentFragment,也就是文档碎片,它表示一种轻量级的文档,主要是用来存储临时节点,大量操作DOM时用它可以大大提升性能
修改节点
appendChild
parent.appendChild(child)
child
追加parent
的子节点到最后面
insertBefore
parentNode.insertBefore(newNode, refNode) // refNode 是必传, 如果refNode是undefined 或 null, 则会将节点添加到末尾
将某个节点插入到另外一个节点的前面
removeChild
删除指定的子节点并返回子节点
var delete = parent.removeChild(node) // 指向被删除的节点,存在内存中,可以对齐进行下一步操作
replaceChild 用于将一个节点替换成另一个节点
parent.replaceChild(newChild, oldChild)
节点关系
父关系
parentNode 每个节点都有一个parentNode属性,表示元素的父节点
parentElement 返回元素的父元素节点,与parentNode的区别在于,其父节点必须是一个Element元素,如果不是返回null
子关系
children 返回一个实时的HTMLCollection, 子节点都是Element
childNode 返回一个实时的NodeList, 表示元素的子节点列表,子节点会包含文本节点、注释节点
firstChild 返回第一个子节点,不存在返回null,
lastChild 返回最后一个子节点,不存在返回null
兄弟关系
previousSibling 节点的前一个节点,不存在返回null,可能拿到文本节点或者注释节点
nextSibling 节点的后一个节点,如果不存在返回null, 也可能拿到文本节点或者注释节点
previousElementSibling 返回前一个元素节点,前一个节点必须是Element
nextElementSibling 返回后一个元素节点,后一个节点必须是Element
元素属性
element.setAttribute(name, value) 给元素设置属性
getAttribute 返回特定名相应的特性值,不存在返回null
var value = element.getAttribute('id')
样式相关的
直接修改
elem.style.color = 'red'
elem.style.setProperty('font-size': '16px')
elem.style.removeProperty('color')
动态添加样式规则
var style = document.createElement('style')
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}'
document.head.appendChild(style)
window.getComputedStyle
通过element.style.xxx
只能获取到内联样式,借助window.getComputedStyle
可以获取应用傲元素上的所有样式
var style = window.getComputedStyle(element, [pseudoElt])
var style = window.getComputedStyle(elem,null).getPropertyValue("height")
getBoundingClientRect
getBoundingClientRect
用来返回元素的大小以及相对于浏览器可视窗口的位置
var clientRect = element.getBoundingClientRect();
最新文章
- 【原创】JEECMS v6~v7任意文件上传漏洞(1)
- 【记录】JS toUpperCase toLowerCase 大写字母/小写字母转换
- tnt_esri.dat Arcgis8.1安装license
- javascript 中加’var‘和不加&#39;var&#39;的区别,你真的懂吗?
- Oracle绑定变量
- LNMP(linux+nginx+mysql+php)服务器环境配置
- Dubbo服务重载方法在JDK1.8上调用出错的问题(待解决)
- hdu 3635 Dragon Balls
- MFC控件
- WIN32程序挂钩SetLastError,输出错误描述到控制台
- CA
- .Net Core中使用ref和Span<;T>;提高程序性能
- Android初级教程:单击事件的传递机制初谈
- [转]sqlldr 导入乱码,Oracle客户端字符集问题
- Django积木块十——全文检索
- spring aop 实践
- Python hasattr,getattr,setattr,delattr
- 04、常用RDD操作整理
- Asp.Net正则获取链接地址
- 字符测试篇isalnum isalpha isascii iscntrl isdigit isgraphis islower isprint isspace ispunct isupper isxdigit