javascript DOM操作

Posted 2020-09-10 cumting

在 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