2022.4.14 BOM对象与DOM对象

5.操作BOM对象(重点)

BOM:浏览器对象模型

window

代表浏览器窗口

1 window.alert(1)
2 window.innerHeight //内部窗口高度
3 window.innerWidth  //内部窗口宽度
4 window.outerHeight//外部窗口高度
5 window.outerWidth  //外部窗口宽度

Navigator

封装了浏览器的信息，大多数时候，我们不会使用navigator对象

1 navigator.appVersion//浏览器版本信息

location（重要）

代表当前页面的URL信息

1 location.reload();//重新加载当前页面
2 location.assign('网址');//从当前页面跳转到网址

document(文档树)

document 代表当前的页面

每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

在DOM对象模型中，Document是文档对象，通过Document对象可以获取所有HTML文档中的元素对象

获取具体的文档树节点

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <dl id="app">
 9         <dt>Java</dt>
10         <dd>JavaSE</dd>
11         <dd>JavaEE</dd>
12     </dl>
13     <script>
14         //通过id获得具体的节点
15         var dl = document.getElementById('app');
16     </script>
17 </body>
18 </html>

获取cookie

6.操作DOM对象(重点)

DOM 全称是 Document Object Model 文档对象模型

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。那么它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。

要改变页面某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口，这个入口连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型(DOM)来获得的。

DOM是一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件，DOM实际上是建立网页与JavaScript语言沟通的桥梁。

浏览器网页就是一个Dom树形结构!

Dom节点：文档树中的节点

Document 对象的理解：

Document 它管理了所有的 HTML 文档内容(表示整个html页面)。
document 它是一种树结构的文档。有层级关系。
它让我们把所有的标签都对象化
我们可以通过 document 访问所有的标签对象。

什么是对象化？我们基础班已经学过面向对象。请问什么是对象化？

举例：有一个人有年龄：18 岁，性别：女，名字：张某某

我们要把这个人的信息对象化怎么办

1  Class Person { 
2      private int age; 
3      private String sex; 
4      private String name; 
5  }

那么 html 标签要对象化怎么办？

1  <body>
2      <div id = "div01">div内容</div>
3  </body>

模拟对象化，相当于：

1 class Dom{ 
2      private String id; // id 属性            
3      private String tagName; //表示标签名      
4      private Dom parentNode; //父亲           
5      private List<Dom> children; // 孩子结点         
6      private String innerHTML; // 起始标签和结束标签中间的内容 
7  }

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript" >
 7          function onclickFun() {
 8              // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
 9              var usernameObj = document.getElementById("username");
10              alert(usernameObj.id);//username
11              alert(usernameObj.type);//text
12              alert(usernameObj.value);//获取输入框中的值  输入框不输入默认为value值
13              alert(usernameObj.tagName);
14              alert(usernameObj.parentElement);
15              alert(usernameObj.children);
16              alert(usernameObj.innerText);
17          }
18      </script>
19  </head>
20  <body>
21  用户名：<input type="text" id="username" value="内容"/>
22  </body>
23  </html>

要操作一个Dom节点，就必须要先获得这个Dom节点

获得DOM节点

document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值，返回对拥有指定id的第一个对象的引用
document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值，返回对象集合
document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名，返回带有指定标签名的对象集合
document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注： document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

getElementById 方法

示例代码

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript" >
 7          /*
 8          * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
 9          * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。
10          * */
11          function onclickFun() {
12              // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
13              var usernameObj = document.getElementById("username");
14              var usernameText = usernameObj.value;//获取这个对象的value值
15  
16              // 如何验证字符串，符合某个规则，需要使用正则表达式技术
17              var patt = /^\w{5,12}$/;
18  
19              var usernameSpanObj = document.getElementById("usernameSpan");
20  
21              if (patt.test(usernameText)) {
22                  // innerHTML 表示起始标签和结束标签中的内容
23                  // innerHTML 这个属性可读，可写
24                  usernameSpanObj.innerHTML = "用户名合法！";//写入span标签中
25              } else {
26                  usernameSpanObj.innerHTML = "用户名不合法！";
27              }
28          }
29      </script>
30  </head>
31  <body>
32  用户名： <input type="text" id="username" value="wzg"/>
33          <span id="usernameSpan" style="color:red;">原始内容</span>
34          <button onclick="onclickFun()">校验</button>
35  </body>
36  </html>

点击校验

getElementsByName 方法

示例代码

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          // 全选,让所有复选框都选中
 8          function checkAll() {
 9              // 这个集合的操作跟数组 一样,集合中每个元素都是 dom 对象,这个集合中的元素顺序是他们在 html 页面中从上到下的顺序
10              var hobbies = document.getElementsByName("hobby");
11              
12              // checked 表示复选框的选中状态。如果选中是 true，不选中是 false, checked 这个属性可读，可写
13              for (var i = 0; i < hobbies.length; i++){
14                  hobbies[i].checked = true;
15              }
16          }
17          
18          //全不选
19          function checkNo() {
20              var hobbies = document.getElementsByName("hobby");
21              for (var i = 0; i < hobbies.length; i++){
22                  hobbies[i].checked = false;
23              }
24          }
25          
26          // 反选
27          function checkReverse() {
28              var hobbies = document.getElementsByName("hobby");
29              for (var i = 0; i < hobbies.length; i++) {
30                  hobbies[i].checked = !hobbies[i].checked;
31              }
32          }
33      </script>
34  </head>
35  <body>
36  兴趣爱好：
37      <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
38      <input type="checkbox" name="hobby" value="java">Java
39      <input type="checkbox" name="hobby" value="js">JavaScript
40      <br/>
41      <button onclick="checkAll()">全选</button>
42      <button onclick="checkNo()">全不选</button>
43      <button onclick="checkReverse()">反选</button>
44  </body>
45  </html>

getElementsByTagName 方法

示例代码：

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          // 全选
 8          function checkAll() {
 9              // document.getElementsByTagName("input");
10              // 是按照指定标签名来进行查询并返回集合
11              var inputs = document.getElementsByTagName("input");
12              for (var i = 0; i < inputs.length; i++){
13                  inputs[i].checked = true;
14              }
15          }
16      </script>
17  </head>
18  <body>
19  兴趣爱好：
20      <input type="checkbox" value="cpp" checked="checked">C++
21      <input type="checkbox" value="java">Java
22      <input type="checkbox" value="js">JavaScript
23      <br/>
24      <button onclick="checkAll()">全选</button>
25  </body>
26  </html>

createElement 方法

示例代码

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          //文档(这个html文档)加载完成后执行  解决document.body.appendChild(divObj);执行时还未加载body标签的问题
 8          window.onload = function () {
 9              // 现在需要我们使用 js 代码来创建 html 标签，并显示在页面上
10              // 标签的内容就是：<div>小明</div>
11              var divObj = document.createElement("div"); // 创建div对象  目前在内存中 <div></div>
12              
13              //法一：给div中添加内容
14              divObj.innerHTML = "小明"; // <div>小明</div>,但还只是在内存中
15  
16              //法二：给div中添加内容
17              // var textNodeObj = document.createTextNode("小明"); // 有一个文本节点对象 #小明
18              // divObj.appendChild(textNodeObj); // <div>小明</div>
19  
20              // 将div对象添加到body标签下
21              document.body.appendChild(divObj);
22          }
23      </script>
24  </head>
25  <body>
26  兴趣爱好：
27      <input type="checkbox" value="cpp" checked="checked">C++
28      <input type="checkbox" value="java">Java
29      <input type="checkbox" value="js">JavaScript
30      <br/>
31      <button onclick="checkAll()">全选</button>
32  </body>
33  </html>

节点的常用属性和方法

节点就是标签对象

方法：

通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

属性：

childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点
className 用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText 属性，表示获取/设置起始标签和结束标签中的文本

Dom练习

  1  <!DOCTYPE html>
  2  <html>
  3  <head>
  4  <meta charset="UTF-8">
  5  <title>dom查询</title>
  6  <link rel="stylesheet" type="text/css" href="style/css.css" />
  7  <script type="text/javascript">
  8      window.onload = function(){
  9          //1.查找#bj节点
 10          document.getElementById("btn01").onclick = function () {
 11              var bjObj = document.getElementById("bj");
 12              alert(bjObj.innerHTML);
 13          }
 14          //2.查找所有li节点
 15          var btn02Ele = document.getElementById("btn02");
 16          btn02Ele.onclick = function(){
 17              var lis = document.getElementsByTagName("li");
 18              alert(lis.length)
 19          };
 20          //3.查找name=gender的所有节点
 21          var btn03Ele = document.getElementById("btn03");
 22          btn03Ele.onclick = function(){
 23              var genders = document.getElementsByName("gender");
 24              alert(genders.length)
 25          };
 26          //4.查找#city下所有li节点
 27          var btn04Ele = document.getElementById("btn04");
 28          btn04Ele.onclick = function(){
 29              //1 获取id为city的节点
 30              //2 通过city节点.getElementsByTagName按标签名查子节点
 31              var lis = document.getElementById("city").getElementsByTagName("li");
 32              alert(lis.length)
 33          };
 34          //5.返回#city的所有子节点
 35          var btn05Ele = document.getElementById("btn05");
 36          btn05Ele.onclick = function(){
 37              //1 获取id为city的节点
 38              //2 通过city获取所有子节点
 39              alert(document.getElementById("city").childNodes.length);
 40          };
 41          //6.返回#phone的第一个子节点
 42          var btn06Ele = document.getElementById("btn06");
 43          btn06Ele.onclick = function(){
 44              // 查询id为phone的节点
 45              alert( document.getElementById("phone").firstChild.innerHTML );
 46          };
 47          //7.返回#bj的父节点
 48          var btn07Ele = document.getElementById("btn07");
 49          btn07Ele.onclick = function(){
 50              //1 查询id为bj的节点
 51              var bjObj = document.getElementById("bj");
 52              //2 bj节点获取父节点
 53              alert( bjObj.parentNode.innerHTML );
 54          };
 55          //8.返回#android的前一个兄弟节点
 56          var btn08Ele = document.getElementById("btn08");
 57          btn08Ele.onclick = function(){
 58              // 获取id为android的节点
 59              // 通过android节点获取前面兄弟节点
 60              alert( document.getElementById("android").previousSibling.innerHTML );
 61          };
 62          //9.读取#username的value属性值
 63          var btn09Ele = document.getElementById("btn09");
 64          btn09Ele.onclick = function(){
 65              alert(document.getElementById("username").value);
 66          };
 67          //10.设置#username的value属性值
 68          var btn10Ele = document.getElementById("btn10");
 69          btn10Ele.onclick = function(){
 70              document.getElementById("username").value = "小明";
 71          };
 72          //11.返回#city的文本值
 73          var btn11Ele = document.getElementById("btn11");
 74          btn11Ele.onclick = function(){
 75              alert(document.getElementById("city").innerText);
 76          };
 77  
 78          //12.返回#city的内容值
 79          var btn12Ele = document.getElementById("btn12");
 80          btn12Ele.onclick = function(){
 81              alert(document.getElementById("city").innerHTML); 
 82     }; 
 83     }; 
 84 </script> 
 85 </head> 
 86 <body> 
 87 <div id="total"> 
 88 <div class="inner"> 
 89 <p> 
 90     你喜欢哪个城市? 
 91 </p> 
 92  
 93 <ul id="city"> 
 94 <li id="bj">北京</li> 
 95 <li>上海</li> 
 96 <li>东京</li> 
 97 <li>首尔</li> 
 98 </ul> 
 99  
100 <br> 
101 <br> 
102  
103 <p> 
104     你喜欢哪款单机游戏? 
105 </p> 
106  
107 <ul id="game"> 
108 <li id="rl">红警</li> 
109 <li>实况</li> 
110 <li>极品飞车</li> 
111 <li>魔兽</li> 
112 </ul> 
113  
114 <br /> 
115 <br /> 
116  
117 <p> 
118     你手机的操作系统是? 
119 </p> 
120  
121 <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> 
122 </div> 
123  
124 <div class="inner"> 
125     gender: 
126 <input type="radio" name="gender" value="male"/> 
127     Male 
128 <input type="radio" name="gender" value="female"/> 
129     Female 
130 <br> 
131 <br> 
132     name: 
133 <input type="text" name="name" id="username" value="abcde"/> 
134 </div> 
135 </div> 
136 <div id="btnList"> 
137 <div><button id="btn01">查找#bj节点</button></div> 
138 <div><button id="btn02">查找所有li节点</button></div> 
139 <div><button id="btn03">查找name=gender的所有节点</button></div> 
140 <div><button id="btn04">查找#city下所有li节点</button></div> 
141 <div><button id="btn05">返回#city的所有子节点</button></div> 
142 <div><button id="btn06">返回#phone的第一个子节点</button></div> 
143 <div><button id="btn07">返回#bj的父节点</button></div> 
144 <div><button id="btn08">返回#android的前一个兄弟节点</button></div> 
145 <div><button id="btn09">返回#username的value属性值</button></div> 
146 <div><button id="btn10">设置#username的value属性值</button></div> 
147 <div><button id="btn11">返回#city的文本值</button></div> 
148 <div><button id="btn12">返回#city的内容值</button></div> 
149 </div> 
150 </body> 
151 </html>

posted @ 2022-04-17 15:07 暴躁C语言阅读(47) 评论(0) 收藏举报

刷新页面返回顶部

暴躁C语言

2022.4.14 BOM对象与DOM对象

5.操作BOM对象(重点)

window

Navigator

location（重要）

document(文档树)

6.操作DOM对象(重点)

获得DOM节点

getElementById 方法

getElementsByName 方法

getElementsByTagName 方法

createElement 方法

节点的常用属性和方法

公告