DOM文档对象模型常用方法

心已赠人 2022-11-27 12:03 121阅读 0赞

# DOM #

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素，属性和文本的树结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

## HTML DOM - 改变 HTML ##

改变 HTML 输出流

*  在 JavaScript 中，**document.write()** 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
    <html>
    <body>
    
    <script>
    document.write(Date());
    </script>
    
    </body>
    </html>

改变 HTML 内容

*  修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
 *  语法：document.getElementById(id).innerHTML=新的 HTML

<html>
    <body>
    //改变了 <p>元素的内容： 
    <p id="p1">Hello World!</p>
    
    <script>
    document.getElementById("p1").innerHTML="新文本!";
    </script>
    
    </body>
    </html>

改变 HTML 属性

*  语法：document.getElementById(id).attribute=新属性值

//改变了 <img> 元素的 src 属性：
    <!DOCTYPE html>
    <html>
    <body>
    
    <img id="image" src="smiley.gif">
    
    <script>
    document.getElementById("image").src="landscape.jpg";
    </script>
    
    </body>
    </html>

## HTML DOM - 改变CSS ##

改变 HTML 样式

*  语法：document.getElementById(id).style.property=新样式

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
     
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>
    <script>
    document.getElementById("p2").style.color="blue";
    document.getElementById("p2").style.fontFamily="Arial";
    document.getElementById("p2").style.fontSize="larger";
    </script>
     
    </body>
    </html>

## HTML DOM Document 对象 ##

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

> 文档是一个文档节点。  
> 所有的HTML元素都是元素节点。  
> 所有 HTML 属性都是属性节点。  
> 文本插入到 HTML  
> 元素是文本节点。  
> 注释是注释节点。

**Document 对象**

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。
    Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
    Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

HTML文档有节点构成的集合，DOM节点有：

*  **元素节点**，html , body ,p 等都是元素节点，及标签
 *  **文本节点**，向用户展示的内容，如列表标签li中的javascript，DOM,css 等文本
 *  **属性节点**：元素属性，a标签的连接属性href=“”

节点属性  
在DOM中，每个节点都有一个对象，DOM节点有三个重要的属性：

*  `nodeName`:节点的名称
 *  `nodeValue`:节点的值
 *  `nodeType`:节点的类型

**nodeName属性**：节点的名称，是只读的

*  元素节点的nodeNme与标签名相同
 *  元素节点的nodeName是属性的名称
 *  文本节点的nodeName永远是\#text
 *  文档节点的nodeName永远是\#document

**nodeValue属性**：节点的值

*  元素节点的nodeValue是undefined或null

文

*  本节点的nodeValue是文本自身
 *  属性节点的nodeValue是属性的值

**nodeType属性**：节点的类型，是只读的，以下常用的几种节点类型：

> 元素：1  
> 属性：2  
> 文本：3  
> 注释：8  
> 文档：9

## HTML DOM 事件 ##

HTML 事件的例子：

当用户点击鼠标时 
    当网页已加载时		
    当图像已加载时
    当鼠标移动到元素上时
    当输入字段被改变时
    当提交 HTML 表单时
    当用户触发按键时

例如：

//当用户在 <h1> 元素上点击时，会改变其内容
    <!DOCTYPE html>
    <html>
    <body>
    <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
    </body>
    </html>

HTML 事件属性  
如需向 HTML 元素分配 事件，可以使用事件属性。

//名为 ok的函数将在按钮被点击时执行。
    <button onclick="ok()">点这里</button>

## HTML DOM 元素 (节点) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]举例：  
创建元素节点和文本节点

*  **createElement方法**可创建元素节点，此方法可返回一个Element对象。  
    语法：document.createElement(tagName) 参数：tagName,  
    字符串值，这个字符串用来指明创建元素的类型。 与appendChild 或 insertBefore方法联合使用，将元素显示在页面中
 *  **createTextNode()方法**创建新的文本节点，返回新创建的Text节点 语法：document.createTextNode(data) 参数：data字符串值，可规定此节点的文本

var element = document.createElement("div");
    element.className = "message";//设置div元素的类名
    var textNode = document.createTextNode("hello world");
    element.appendChild(textNode);//将textNode插入节点element中
    document.body.appendChild(element);//将element插入文档中

插入节点appendChild()

*  在指定节点的最后一个子节点列表后添加一个新的子节点。
    
    语法：appendChild(newnode)  
    newnode:指定追加的节点

<div id="text">
    	<p id="x1">HTML</p>
    	<p id="x2">CSS</p>
    </div>
    <script>
    var node = document.getElementById("text");
    var newnode = document.createElement("p");
    newnode.innerHTML = "this is a new p";
    node.appendChild(newnode);
    </script>

插入节点insertBefore()

*  insertBefore()方法可在已有的子节点前插入一个新的子节点 语法：insertBefore(newnode,node);  
    参数：newnode 要插入的新节点 node:指定此节点前插入节点

<div id="text">
    	<p id="x1">HTML</p>
    	<p id="x2">CSS</p>
    </div>
    <script>
    var node = document.getElementById("text");
    var newnode = document.createElement("p");
    var nodex1 = document.getElementById("x1");
    newnode.innerHTML = "this is a new p";
    node.insertBefore(newnode,nodex1);
    </script>

删除节点removeChild()

*  removeChild() 方法从子节点列表中删除某个节点。如果删除成功，此方法可返回被删除的节点。如失败，则返回null  
    语法：nodeObject.removeChild(node) 参数：node,必须，指定需要删除的节点

<div id="text">
    	<p id="x1">HTML</p>
    	<p id="x2">CSS</p>
    </div>
    <script>
    var node = document.getElementById("text");
    var nodex1 = document.getElementById("x1");
    node.removeChild(nodex1);
    </script>

替换节点元素replaceChild

*  replaceChild实现子节点（对象）的替换。返回被替换对象的引用  
    语法：node.replaceChild(newnode,oldnew) 参数：newnode 必需，用于替换oldnew的对象。  
    oldnew 必需，被newnode替换的对象

**getElementsByName()方法**

getElementsByName()方法返回带有指定名称的节点对象的集合

*  语法： document.getElementsByName(name)
 *  文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组，而不是一个元素
 *  和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始

**getElementsByTagName()方法**

getElementsByTagName()方法 返回带有指定标签名的节点对象的结合，返回元素顺序是他们在文档中的书序

*  语法： getElementsByTagName(tagname)
 *  tagName是标签的名称，如p ,a img等标签名
 *  和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始

**setAttribute()方法**  
setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

*  语法：elementNode.setAttribute(name,value)
 *  name: 要设置的属性名
 *  value: 要设置的属性值
 *  把指定的属性设置为指定的值，如果不存在具有指定名称的属性，该方法将创建一个新属性
 *  类似于getAttribute方法，setAttribute方法只能通过元素节点对象调用的函数

**getAttribute()方法**  
getAttribute()方法通过元素节点的属性名称获取属性值

*  语法：elementNode.getAttribute(name)
 *  elementNode:使用getElementById(),getElementsByTagName()等方法，获取到的元素节点
 *  name: 要想查询的元素节点的属性名字

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/27bcad605b754385b4fe4cefa39930f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200815104534590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/d987f75202834931b0633fa11b24dce6.png