欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript DOM

程序员文章站 2022-07-26 22:58:54
DOM节点 整个文档是一个文档节点 整个文档是一个文档节点 每个HTML元素是元素节点 每个HTML元素是元素节点 HTML元素内的文本是文本节点 HTML元素内的文本是文本节点 每个HTML属性是属性节点 每个HTML属性是属性节点 注释是注释节点 注释是注释节点 HTML DOM节点数 HTML ......
DOM节点
  • 整个文档是一个文档节点
  • 每个HTML元素是元素节点
  • HTML元素内的文本是文本节点
  • 每个HTML属性是属性节点
  • 注释是注释节点
  • HTML DOM节点数
HTML DOM将HTML文档视为数结构,这种结构被称为节点数
JavaScript DOM
通过HTML DOM,树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除节点
  • 节点父,子和同胞
在节点数中,顶端节点被称为根元素(root)
每个节点都有父节点,除了根
一个节点可拥有任意数量的子节点
同胞拥有相同的父节点
JavaScript DOM
<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方法
  • createAttribute()创建属性节点
 
  • createElement()创建元素节点
 
  • creteTextNode()创建文本节点
 
  • appendChild()把新节点添加到指定节点
 
  • insertBefore()在指定的子节点前面插入新的子节点
 
  • removeChild()删除子节点
 
  • replaceChild()替换子节点
 
  • getAttribute()返回指定的属性值
 
  • setAttribute()把指定属性设置或修改为指定的值
 
HTML DOM属性
  • innerHTML 获取节点的文本值
innerHTML属性对于获取或替换HTML元素的内容很有用
  • parentNode 获取节点的父节点
  • childNodes 获取节点的子节点
  • attributes 获取节点的属性节点
  • firstChild返回第一个子节点
 
<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 //内容
HTML DOM访问
  • getElementById()获取指定ID的元素
<p id="xiu">文本</p>
docuemt.getElementById("xiu")
  • getElementsByTagName()获取指定标签名称的所有元素
<p>文本</p>
document.getElementsByTagName("p")
  • getElementsByClassName()获取指定类名的所有元素
<p class="xiu">文本</p>
document.getElementsByClassName("xiu")[0]
HTML DOM 修改
  • 创建HTML内容
<p id="p">内容</p>
document.getElementById("p").innertHTML = "修改内容"
  • 改变HTML样式
<p id="p">内容</p>
document.getElementById("p").style.color = "red"
  • 创建新的HTML元素
var xiu = document.createElement("p") //创建p标签
var kang = document.createTextNode("内容") //创建文本内容
xiu.appendChild(kang) //将文本内容添加到p标签