JavaScript DOM

DOM节点

整个文档是一个文档节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

每个HTML属性是属性节点

注释是注释节点

HTML DOM节点数

HTML DOM将HTML文档视为数结构，这种结构被称为节点数

通过HTML DOM，树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除节点

节点父，子和同胞

在节点数中，顶端节点被称为根元素(root)

每个节点都有父节点，除了根

一个节点可拥有任意数量的子节点

同胞拥有相同的父节点

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

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

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

文本节点"内容"的父节点是节点

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

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

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

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

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

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

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

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

HTML DOM方法

createAttribute()创建属性节点

createElement()创建元素节点

creteTextNode()创建文本节点

appendChild()把新节点添加到指定节点

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

removeChild()删除子节点

replaceChild()替换子节点

getAttribute()返回指定的属性值

setAttribute()把指定属性设置或修改为指定的值

HTML DOM属性

innerHTML 获取节点的文本值

innerHTML属性对于获取或替换HTML元素的内容很有用

parentNode 获取节点的父节点

childNodes 获取节点的子节点

attributes 获取节点的属性节点

firstChild返回第一个子节点

内容

元素节点

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 //内容

HTML DOM访问

getElementById()获取指定ID的元素

文本

docuemt.getElementById("xiu")

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

文本

document.getElementsByTagName("p")

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

文本

document.getElementsByClassName("xiu")[0]

HTML DOM 修改

创建HTML内容

内容

document.getElementById("p").innertHTML = "修改内容"

改变HTML样式

内容

document.getElementById("p").style.color = "red"

创建新的HTML元素

var xiu = document.createElement("p") //创建p标签

var kang = document.createTextNode("内容") //创建文本内容

xiu.appendChild(kang) //将文本内容添加到p标签

猜你喜欢