THML DOM / Element 对象操做

随着Vue等MVVM框架流行，操做DOM已经不想以前那么频繁，所以不少DOM的操做已经陌生，特此回顾HTML中DOM操做

获取Element节点

　　熟悉的有  

　　　　经过ID获取，返回element对象      　　　　      　document.getElementById(elementId)　　

　　　　经过Name获取，返回element对象数组   　　　   document.getElementsByName(elementName)

　　　　经过TagName获取，返回element对象数组 　　　document.getElementsByTagName(tagName）

　　随着浏览器发展，先大部分浏览器已经支持以下两种更为简单的获取Dom的方法，使用方法与Jquery选择器同样

　　　 querySelector　　    返回类型：节点对象

　　　 querySelectorAll　　　　返回类型：节点对象数组

　  经过子节点得到父节点

　　　childNode.parentNode

 

Element经常使用方法和操做

element.className	设置或返回元素的 class 属性
element.clientHeight	返回元素的可见高度
element.clientWidth	返回元素的可见宽度
element.getAttribute()	返回元素节点的指定属性值
element.hasAttribute()	若是元素拥有指定属性，则返回true，不然返回 false
element.innerHTML	设置或返回元素的内容
element.appendChild()	向元素添加新的子节点，做为最后一个子节点
element.offsetLeft	返回元素的水平偏移位置
element.offsetTop	返回元素的垂直偏移位置
element.removeAttribute()	从元素中移除指定属性
element.removeChild()	从元素中移除子节点
element.style	设置或返回元素的 style 属性
nodelist.length	返回 NodeList 中的节点数

 

修改节点内容

document.querySelector('p').innerHTML = 'new text'

修改路径

document.getElementById("image").src="landscape.jpg";
document.querySelector('a').href = "http://www.qq.com"

修改样式

document.getElementById(id).style.backgroundColor='#ff0'

绑定事件

onclick=function(e){ ... }

建立节点

 var para = document.createElement('a'); para.innerHTML = 'baidu'; para.setAttribute('href','https://www.baidu.com'); document.querySelector('#box').appendChild(para);

删除节点

document.querySelector('ul').removeChild(document.querySelectorAll('li')[0])