当前位置: 首页 - 编程技术 - 文章正文

浅谈原生JS操作DOM常用的属性和方法

xiaoqihv

① 获取所有子节点对象

childeNodes 

② 获取第一个子节点

firstChild   

③ 获取最后一个子节点

lastChild    

④ 获取父节点

parentNode  

⑤ 获取下一个兄弟节点

nextSibling

⑥ 获取前一个兄弟节点

previousSibling

⑦ 获取节点的HTML标记名称(大写字母)

nodeName 

⑧ 获取DOM元素:

document.getElementById("***");document.getElementsByClassName("***")[0];document.getElementsByTagName("***")[0];document.getElementsByName("***")[0];

⑨ 修改CSS样式

document.getElementById("***").style.***= "***";

⑩ 修改CLASS属性

document.getElementById("***").className = "***";document.getElementById("***").className = "";

⑪ 修改文本

document.getElementById("***").innerHTML = "***";

⑫ 创建、插入、删除、复制节点

document.createElement('div');document.createTextNode('123');***.appendChild(***);***.parentNode.removeChild(***)***.cloneNode(true)或***.cloneNode()***父节点.insertBefore(***待插入节点, ***参考节点)

注意:原生JS没有insertAfter()方法。

原生JS和jQuery操作DOM的对比请见:http://blog.csdn.net/zhouziyu2011/article/details/60961444

文章地址:https://wenmayi.cn/post/812.html