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])