Web API
ECMAScript ——JavaScript的核心。
BOM——浏览器对象模型。
DOM——文档对象模型。
Dom节点
DOM——文档对象模型。
参考
https://juejin.cn/post/6844903445967683597#heading-13
节点属性
nodeName(节点名称)
所包含的元素的标签名称永远是大写的
元素节点的nodeName是标签名称。
属性节点的nodeName是属性名称。
文本节点的nodeName永远是#text。
文档节点的nodeName永远是#document。
nodeValue (节点值)
对于文本节点,nodeValue属性包含文本。
对于属性节点,nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。
nodeType(节点类型)
元素节点的nodeType是1。
属性节点的nodeType是2。
文本节点的nodeType是3。
注释节点的nodeType是8。
文档节点的nodeType是9。
常用方法:
获取节点:
参考:https://blog.csdn.net/m0_64346035/article/details/124404065
document.getElementById();``//id=""通过id名来获取元素,返回一个元素对象
document.getElementsByName();``//name=""通过name属性获取元素,返回元素对象数组
document.getElementsByTagName();``//"input"通过标签名获取元素,返回元素对象数组
document.getElementsByClassName();``//class=""通过class名来获取元素,返回元素对象数组(ie8以上)
document.querySelector();``//根据css选择器规则返回第一个匹配到的元素,"#div1>p"
document.querySelectorAll();``//返回所有匹配到的元素
获取/设置元素的属性值:
element.getAttribute(attributeName) //括号传入属性名,返回对应属性的属性值
element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值
创建节点Node:
document.createElement("h3") //创建一个html元素,这里以创建h3元素为例
document.createTextNode(String); //创建一个文本节点;
document.createAttribute("class"); //创建一个属性节点,这里以创建class属性为例
增添节点:
element.appendChild(Node); //往element内部最后面添加一个节点,参数是节点类型
elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode
删除节点:
element.removeChild(Node) //删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null
element.remove()删除所有节点
常用属性:
获取当前元素的父节点 :
element.parentNode//返回当前元素的父节点对象
element.attributes["属性名称"]//可以获取到元素节点的相关属性
element.dataset //获取当前元素有关 data- 的属性
//element.dataset.id 获取 data-id 属性 的值
获取当前元素的子节点:
element.chlidren//返回当前元素所有子元素节点对象,只返回HTML节点
element.chilidNodes //返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)
element.firstChild //返回当前节点的第一个子节点对象 (节点)
element.firstElementChild //返回当前元素的第一个子节点对象 (元素)
element.lastChild//返回当前节点的最后一个子节点对象 (节点)
element.lastElementChild //返回当前元素的第一个子节点对象 (元素)
获取当前元素的同级元素:
element.nextSibling//返回当前节点的下一个同级节点 没有就返回null (节点)
element.nextElementSibling//返回当前元素的下一个同级元素 没有就返回null (元素)
element.previousSibling //返回当前节点上一个同级节点 没有就返回null (节点)
element.previousElementSibling //返回当前元素上一个同级元素 没有就返回null (元素)
注意事项
firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理
获取当前元素的文本:
element.innerHTML//返回元素的所有文本,包括html代码
element.innerText //返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码
获取当前节点的节点类型:
node.nodeType//返回节点的类型,数字形式(1-12)常见几个1:元素节点,2:属性节点,3:文本节点。
设置样式:
element.style.color=“#eea”; //设置元素的样式时使用style,这里以设置文字颜色为例。