JS中Dom的相关知识示例

　　介绍

这篇文章将为大家详细讲解有关JS中Dom的相关知识示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

主旨

用来记录和总结学的知识点,以便温故知新

说明

这么写方便自己记忆

节点相关

Dom节点获取

getElement (Id、名称、TagName)和querySelector(/所有这个是静态的节点集合,不是实时的)
子节点的时候存在缺陷则是nextSibling/这个/lastChild//previousSibling parentNode获取的是所有类型的相关节点,不单单是元素节点
儿童/firstElmentChild/lastElmentChild/nextElmentSibling/previousElmentSibling/parentElment,获取单单只是元素相关节点

节点树

重点是:

HTMLBodyElement这些都是构造函数,原型链的终端还是对象。原型

“& lt; script>警报(& # 39;小姐:am  John 拷贝an  annoying 警报! & # 39;)& lt;/script>“,//无风险
　　“& lt; img  src=https://www.yisu.com/zixun/?”onerror=警报(1)>”;//有风险

所以对于纯文本建议使用textContent

outerHTML可以用来取代替换当前及自身的内容

nodeValue只有文本和注释节点才有值,否则输出空

属性相关


,

属性元素属性的映射集合,可通过的迭代遍历出名称

hasAttribute/获?设置/删除==祝辞检测是否存在属性/得到/设置/删除

elem.proName与elem.getAttribute (proName)基本一致,有个别不一致,例如<代码>输入值

let  input =, document.querySelector (“input"); 　　input.setAttribute (“value",, 3),,,,,,,,,,,,,//行间样式显示3 　　input.value =, 666,,,,,,,,,,,,,,,,,,,,,,,,,,//页面内容显示666 　　console.log (input.getAttribute (“value"));,,//3

自定义属性

通过data-log-n=1可以通过elem.dataset。logN获取属性

元素创建以及增删改查

元素节点创建让div=document.createElement (& # 39; div # 39;);文本节点创建让textNode=document.createTextNode(& # 39;在这里,我是# 39;);

简单补充一个表格的创建

let  table =, document.createElement (“table");,//创建一个表元素节点 　　let  tbody =, document.createElement (“tbody");,//创建一个tbody元素节点 　　tbody.insertRow(0);,//创建一行 　　tbody.rows [0] .insertCell(0);,//创建一行第一列 　　tbody.rows [0] .cells [0] .append (document.createTextNode(“(0, 0)“)),,//补充其内容 　　tbody.rows [0] .insertCell(1),,//创建一行第二列 　　tbody.rows [0] .cells [1] .append (document.createTextNode (“(0, 1)“)); 　　table.append(身体); 　　div.append(表);

元素增删改查
, node.append()与node.prepend()都是在节点内部添加,一个始终往队尾加一个往队首加
,node.before()与node.after(),一个加在节点自身节点的上面,一个加在下面
, node.replace();自身节点替换成参数节点
,还有一个node.insertAdjacentHTML (html);在那里有4种值
,“beforebegin"与“afterbegin"在节点开始位置的前或者后添加html

JS中Dom的相关知识示例