DOM操作_domcore-CSDN博客

本文链接：https://blog.csdn.net/lu__lala/article/details/120802125

DOM core(DOM核心操作)

DOM core定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML。XML DOM定义了一套标准的针对XML文档的对象。HTML DOM定义了一套标准的针对HTML文档的对象。

HTML-DOM

使用JavaScript和DOM为HTML文档写脚本时，有许专属的HTML-DOM属性。

CSS-DOM

CSS-DOM是针对CSS的操作

节点与节点之间的关系

整个文档是一个文档节点。
每个HTML标签是一个元素节点
包含在HTML元素中的的文本是文本节点。
每个HTML属性是一个属性节点
注释属于注释节点

1.1获取节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="ris">
    <p id="frist">第一个</p>
    <p id="two">第二个</p>
</div>
</body>
<script>
    var ris=document.getElementById("ris"); //获取节点
    var chiler=ris.children //获取父节点下所有子节点
    ris.firstChild;         //获取父节点下第一个子节点
    ris.lastChild;          //获取父节点下最后一个子节点
    ris.nextElementSibling;      //获取下一个子节点
    ris.previousElementSibling     //获取上一个子节点
</script>
</html>

1.2删除节点

注意：删除多个节点的时候children是在时刻变化的，删除节点的时候一定要注意，不能一次性通过下标删除

1.3插入节点

1.4创建新标签

<body>
<p id="js">javaScript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    var js=document.getElementById("js");
    var list=document.getElementById("list")
   // list.appendChild(js)        //追加到后面
   var newp= document.createElement("p"); //创建一个p标签
    newp.innerText="java";
    list.appendChild(newp)     //追加进去

</script>

节点信息

每个节点都拥有包含节点某些信息的属性

nodeName(节点名称)

nodeName属性含有某个节点的名称，元素节点的nodeName是标签名称。属性节点的nodeName是属性名称。文本节点的nodeName永远是#text。文档节点的nodeName永远是#document。
noneValue(节点值)

对于文本节点，nodeValue属性包含文本，对属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。
noneType(节点类型)

nodeType属性可返回节点的类型