JavaScriptDOM

  • Z时代
  • 2024-01-10
  • 分类：综合

coding

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··

以上是 JavaScriptDOM 的全部内容， 来源链接： utcz.com/z/509998.html

回到顶部