12-3 DOM操作 - 爱码网

一 DOM基础

1 DOM介绍

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

2 DOM树

12-3 DOM操作

上图可知，在HTML当中，一切都是节点：（非常重要）

元素节点：HMTL标签。
文本节点：标签中的文字（比如标签之间的空格、换行）
属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

3 DOM节点的获取

1 var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
2 
3     var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s
4 
5     var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

4 （获取，更改，删除，节点属性）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM基础</title>
 6 </head>
 7 <body>
 8 <img src="./1.jpg" alt="a" id="a1" title="手机图片" class="image">
 9 <script type="text/javascript">
10     //获取节点属性值
11     var myNode = document.getElementsByTagName("img")[0];
12 
13     // console.log(myNode.src);
14     // console.log(myNode.className);    //注意，是className，不是class
15     // console.log(myNode.title);
16     //
17     // console.log("-----第一种方式-------");
18     //
19     // console.log(myNode["src"]);
20     // console.log(myNode["className"]); //注意，是className，不是class
21     // console.log(myNode["title"]);
22     // console.log('--------------------第二种方式-----------');
23     // console.log(myNode.getAttribute("src"));
24     // console.log(myNode.getAttribute("class"));   //注意是class，不是className
25     // console.log(myNode.getAttribute("title"));
26     //设置节点属性值
27     // console.log("-----第一种方式-------");
28     // myNode.src='./2.jpg';
29     // myNode.className='image2';
30     console.log('--------------------第二种方式------');
31      myNode.setAttribute("src","./3.jpg");
32     myNode.setAttribute("class","image3-box");
33     myNode.setAttribute("id","你好");
34     //删除节点的属性
35     myNode.removeAttribute('class');
36     myNode.removeAttribute('id');
37 </script>
38 </body>
39 </html>

View Code