随着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])
原文地址：https://www.cnblogs.com/xiaoliwang/p/9039005.html
时间： 2024-10-08 17:01:08