操作DOM的学习

Posted 2021-10-28 nuist__NJUPT

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了操作DOM的学习相关的知识，希望对你有一定的参考价值。

操作DOM的学习

DOM即（Document Object Model）文档对象模型，是W3C制定的一套技术规范，用来描述javascript脚本怎样与html或XML文档进行交互的Web标准。

DOM规定：整个文档是一个文档节点，每个元素是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，等等。

每个节点都有一个nodeType属性，用于表明节点的类型，使用nodeType属性返回值可以判断一个节点的类型，常用值如下：
元素Element的nodeType值为1，属性Attr的nodeType值为2，文本text的nodeType值为3，文档document的nodeType值为9.
使用节点的nodeName和nodeValue属性可以读取节点的名称和值，这两个属性完全取决于节点的类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<body>
<script>
    var node = document.getElementsByTagName("body")[0] ;
    if(node.nodeType == 1){ //先检查节点，看看是否是元素，是，则读取nodeName中的值
        var value = node.nodeName ;
        document.write(value) ;
    }
    if(node.nodeType == 2){ //检查节点是否是属性
        var value1 = node.nodeName() ;
        document.write(value1) ;
    }
    if(node.nodeType == 3){ //检查节点是否是文本
        var value2 = node.nodeName() ;
        document.write(value2) ;
    }
    if(node.nodeType == 8){ //检查节点是否是注释
        var value3 = node.nodeName() ;
        document.write(value3) ;
    }
    if(node.nodeType == 9){ //检查节点是否是文档
        var value4 = node.nodeName() ;
        document.write(value4) ;
    }

</script>
</body>
</html>

DOM为Node定义了如下属性，方便JS对文档树种每个节点进行遍历。
ownerDocument:返回当前节点根元素
parentNode:返回当前节点的父节点
childNodes:返回当前节点的所有子节点的节点列表
firstChild:返回当前节点的首个子节点
lastChild：返回当前节点的最后一个节点
nextSibling:返回当前节点之后的同级相邻节点
previousSibling:返回当前节点的前相邻同级节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<body>
<script>
    var node = document.getElementsByTagName("body")[0] ;
    if(node.nodeType == 1){ //先检查节点，看看是否是元素，是，则读取nodeName中的值
        var value = node.nodeName ;
        document.write(value + "<br>") ;
    }
    document.write(node.ownerDocument + "<br>") ; //返回当前节点的根元素对象
    document.write(node.parentNode +  "<br>") ; //返回当前节点的父节点
    document.write(node.childNodes +  "<br>") ; //返回当前节点的孩子节点
    document.write(node.firstChild +  "<br>") ; //返回当前节点的首个子节点
    document.write(node.lastChild +  "<br>") ; //返回当前节点的最后一个子节点
    document.write(node.nextSibling +  "<br>") ;//返回当前节点之后相邻的同级节点
    document.write(node.previousSibling +  "<br>") ; //返回当前节点之前的相邻节点
</script>
</body>
</html>

Node类型为所有节点定义了很多原型方法，以方便对节点进行操作，其中获得所有浏览器一致支持的方法如下：
appendChild():想当前节点结尾添加子节点
cloneNode()：复制节点
hasChildNodes():判断当前节点是否拥有子节点
insertBefore():在指定节点前插入新节点
normalize():合并相邻的Test节点帮删除空的Test
节点
removeChild()：删除当前节点的子节点
replaceChild():用新节点替换掉一个子节点

访问文档子节点的方法有两种：
1-使用documentElement属性，该属性始终指向HTML页面的html元素。
2-使用childNodes列表访问文档元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<body>
<script>
    var html1 = document.documentElement ;
    var html2 = document.childNodes[0] ;
    var html3 = document.firstChild ;
    document.write(html1 + "<br>") ;
    document.write(html2 + "<br>") ;
    document.write(html3 + "<br>") ;
    var body = document.body ;
    document.write(body + "<br>") ;
    var doctype = document.doctype ;
    document.write(doctype + "<br>") ;
</script>
</body>
</html>

访问文档信息
HTMLDocument的实例对象document包含很多属性用来访问文档信息，主要如下：
title:返回titlle标签包含的信息。
lastModified:返回文档最后修改的日期和时间。
URL：返回当前文档的完整URL，即地址栏中显示的地址信息
domain:返回当前文档的域名
referrer:返回到链接页面的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<script>
    document.write(document.title + "<br>") ; //返回title标签包含的文本信息
    document.write(document.lastModified + "<br>") ; //文档最后一次被修改的时间和日期
    document.write(document.URL + "<br>") ; //返回当前文档完整的URL
    document.write(document.domain + "<br>") ; //返回当前文档的域名
    document.write(document.referrer + "<br>") ; //返回链接到当前页面的那个页面的URL
</script>
</body>
</html>

访问文档元素，document包含多个访问文档元素的方法，简要说明如下：
getElementById():返回指定id属性值的元素
getElementsByTagName():返回指定标签名的元素节点
getElementsByName():返回所有指定名称的元素节点

使用getElementById()方法可以准确获取文档中指定的元素。获取对应文档中id属性值，如果文档不存在指定元素，则返回null，该方法只适用于document对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<div id = "box">盒子</div>
<script>
    var box = document.getElementById("box") ; //获取指定盒子的引用
    var info = "nodeName = " + box.nodeName ; //获取该节点的名称
    info +=  "\\rnodeType = " + box.nodeType ; //获取该节点的类型
    info += "\\rparentNode = " + box.parentNode.nodeName ; //获取该节点父节点名称
    info += "\\rchildNode = " + box.childNodes[0].nodeName ; //获取该节点孩子节点的名称
    alert(info) ; //显示提示信息
</script>
</body>
</html>

getElementsByTagName()返回一个HTMLCollection对象，与nodeList对象类似，可以使用方括号语法或者item()方法访问HTMLCollection对象中的元素，并通过length属性取得这个对象中元素的数量。

访问文档集合，document定义了一些集合属性，这些集合都是HTMLCollection对象，为访问文档对象提供了快捷方式。

getElementsByTagName()方法可以获取指定标签名称的所有元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<div id = "p" >good morning</div>
<script>
    var p = document.getElementsByTagName("p") ; //获取p标签的引用
    for(var i=0; i<p.length; i++){
        p[i].setAttribute("class", "red") ; //为每个p元素定义red样式
        document.write(p[i] + "<br>") ;
    }
</script>
</body>
</html>

createElement()方法能够根据指定的标签名称创建一个新元素，并返回新元素的引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<div id = "p" >good morning</div>
<script>
    var p = document.createElement("p") ; //创建段落元素
    var info = "nodeName : " + p.nodeName ; //获取元素名称
    info += " nodeType : " + p.nodeType ; //获取元素类型
    alert(info) ;
</script>
</body>
</html>

复制元素，cloneNode()方法可以创建一个节点的副本，就是复制节点元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<div id = "p" >good morning</div>
<script>
    var p = document.createElement("p") ; //创建段落元素
    var info = "nodeName : " + p.nodeName ; //获取元素名称
    var node = p.cloneNode(false) ; //复制节点
    alert(info) ;
    alert(node.nodeName) ;
</script>
</body>
</html>

在文档中插入节点主要包括两种方法。
1-appendChild()方法
该方法用于想当前节点的子节点列表末尾添加新的子节点。
2-insertBefore()方法
该方法可在已有的子节点前插入一个新节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<div id = "box" >盒子</div>
<script>
    var p = document.createElement("p") ;
    var txt = document.createTextNode("盒子模型") ;
    var r = p.appendChild(txt) ; //将文本节点添加到段落节点之后
    var res = document.getElementById("box").appendChild(p) ; //获取box的元素,把p节点添加到之后
    document.write(r.nodeName + "<br>") ;
    document.write(res.nodeName) ;
</script>
</body>
</html>

如果文档树中已经存在参数节点，则从文档树中删除，然后重新插入新的位置，如果添加的是DocumentFragment节点，则不会直接插入，而是将它的子节点按序插入到前节点的末尾。

insertBefore(newchild,oldchild):在老节点前插入一个新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<body>
<div id = "box" >盒子</div>
<script>
    var ok = document.getElementById("ok") ; //获取按钮元素的引用
    var red = document.getElementById("red") ; //获取红色盒子的引用
    var blue = document.getElementById("blue") ; //获取蓝色盒子的引用
    var h1 = document.getElementsByTagName("h1").[0] ; //获取标题元素的引用
    red.insertBefore(blue, h1) ; //将蓝色盒子移动到红色盒子里，且位于标题前面
</script>
</body>
</html>

以上是关于操作DOM的学习的主要内容，如果未能解决你的问题，请参考以下文章

使用 JQuery ajax 在 DOM 操作后附加事件

jQuery学习之路-DOM操作

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

AngularJS入门学习笔记一

AngularJS的学习笔记

DOM操作学习与总结