JavaScript DOM | 易学教程

DOM节点

整个文档是一个文档节点

<p id="p" name="kang">内容</p>

每个HTML元素是元素节点（p）

HTML元素内的文本是文本节点（内容）

每个HTML属性是属性节点（id="p" name="kang"）

注释是注释节点

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <h1>题目</h1>
        <p>内容</p>
    </body>
</html>

<html>节点没有父节点，所以他是根节点

<head>和<body>的父节点是<html>节点

文本节点"内容"的父节点是<p>节点

<html>拥有两个子节点：<head>和<body>

<head>节点拥有一个子节点：<title>节点

<title>节点拥有一个子节点：文本节点"标题"

<h1>和<p>节点是同胞节点，同时也是<body>的子节点

<head>元素是<html>元素的首个子节点

<body>元素是<html>元素最后一个子节点

<h1>元素是<body>元素的首个子节点

<p>元素是<body>元素最后一个子节点

HTML DOM访问

getElementById()获取指定ID的元素

<p id="xiu">文本</p>
<script>
    docuemt.getElementById("xiu");
</script>

getElementsByTagName()获取指定标签名称的所有元素（object）

<p>文本</p>
<script>
    document.getElementsByTagName("p");
</script>

getElementsByClassName()获取指定类名的所有元素（object）

<p class="xiu">文本</p>
<script>
    document.getElementsByClassName("xiu");
</script>

HTML DOM属性

parentNode 获取节点的父节点

<span>
    <p id="xiu">文章</p>
</span>
<script>
   document.getElementById("xiu").parentNode;
    
</script>

childNodes 获取节点的子节点（object）

<div id="xiu">
    <p></p>
</div>
<script>
    document.getElementById("xiu").childNodes;
</script>

attributes 获取节点的属性节点

firstChild返回第一个子节点

<div id="xiu">
    <p></p>
</div>
<script>
    document.getElementById("xiu").firstChild;
</script>

style修改节点的css样式

<p id="xiu">修抗</p>
<script>
    document.getElementById("xiu").style.color = "red";
</script>

innerHTML 获取节点的文本值

HTML DOM方法

createAttribute()创建属性节点

<script>
    var classNode = document.createAttribute("class");
    classNode.value = "xiu";</script>

setAttributeNode()插入属性节点

<div id="app"></div>
<script>
    var classNode = document.createAttribute("class");
    classNode.value = "xiu";
    var appNode = document.getElementById("app");
    appNode.setAttributeNode(classNode);
</script>

creteTextNode()创建文本节点

<script>
    document.createTextNode("内容"); </script>

createElement()创建元素节点

<script>
    document.createElement("p");</script>

appendChild()插入元素节点/文本节点

<div id="app"></div>
<script>
    var pNode = document.createElement("p");
    var appNode = document.getElementById("app");
    appNode.appendChild(pNode);
</script>

insertBefore()在指定的子节点前插入新的节点

<div id="app"></div>
<button onclick="xiu()">按钮</button>
<script>
    function xiu(){
        var pNode = document.createElement("p");
        var txtNode = document.createTextNode("文本");
        pNode.appendChild(txtNode);
        var appNode = document.getElementById("app");
        appNode.insertBefore(pNode,appNode.childNodes[0]);
    }    
</script>

removeChild()删除子节点

<div id="xiu">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction(){
        var list=document.getElementById("xiu");
        list.removeChild(list.childNodes[0]);
    }
</script>

replaceChild()替换子节点

getAttribute()返回指定的属性值

元素节点

var d = document.getElementById("p")

d.nodeType //1

d.nodeName //P

d.nodeValue //null

属性节点

var d = document.getElementById("p").getAttributeNode("name")

d.nodeType //2

d.nodeName //name

d.nodeValue //kang

文本节点

var d = document.getElementById("p").firstChild

d.nodeType //3

d.nodeName //#text

d.nodeValue //内容

··END··

来源：oschina

链接：https://my.oschina.net/u/4384021/blog/3987693

标签

javascript

RED