THML DOM / Element 对象操作

Posted 2020-11-05 吃饭睡觉打豆豆

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