首页 > 代码库 > javascript DOM操作
javascript DOM操作
在 HTML DOM (文档对象模型)中,每个部分都是节点(Node):
- 文档本身是文档节点
- 所有 HTML 元素是元素节点 nodeType:1 Element
- 所有 HTML 属性是属性节点 nodeType:2 Attribute
- HTML 元素内的文本是文本节点 nodeType:3 Text
- 注释是注释节点
一:DOM创建
常用
var node1=document.creatElement(‘div‘)
var node2=document.creatTextNode(‘hello‘)
二:DOM 查询
获取元素
var el0=document.querySelector(‘.myclass‘)//获取文档中第一个class为myclass的元素
var el1=document.querySelectorAll(.mayclass)//获取文档中所有class为myclass的元素,按出现顺序排列
var el2=document.querySelectorAll(.mayclass)[0]//el0==el2
var el3=document.getElementById(‘myid‘)//通过id获取
var el4=document.getElementByTagName(‘td‘)//通过标签名
var el5=document.getElementByClassName(‘myclass‘)//通过class获取
var parent=el.parentElement;//获取父元素
var parent=el.parentNode//获取父节点
var el=els.firstChild//获取第一个子节点
var el=els.lastChild//获取最后一个子节点
var el=els.getElementByTagName(‘td‘)//获取子元素
var el=els.getElementByClassName(‘myclass‘)//获取子元素
var el=els.nextSibling//下一个兄弟元素节点
var el=els.previousSibling//上一个兄弟元素节点
三:DOM更改
el.appendChild(els)//添加子元素
el.removeChild(els)//删除子元素
el.replaceChild(newnode,oldnode)//替换子元素
el.cloneNode(true or false)//参数表示是否克隆所有后代
获取元素属性
var attr=el.attributes
javascript DOM操作