首页 > 代码库 > 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操作