-->

JavaScript DOM

2021-02-20 05:17发布

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()返回指定的属性值
 
 
<p id="p" name="kang">内容</p>
元素节点
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··

标签: