JavaScript BOM + html/xml DOM页面对象访问和操作

缺乏、安全感 2023-03-13 06:08 6阅读 0赞

### BOM + html/xml DOM ###

*   *   *  1. BOM
         *   *  1.1 window
             *  1.2 location
             *  1.3 history
             *  1.4 navigator
             *  1.5 screen
         *  2. xml DOM
         *   *  2.1 document 文档对象
             *  2.2 element 元素对象
             *  2.3 node 节点对象
             *  2.4 xml DOM 使用案例 × 3
         *  3. html DOM
         *   *  3.1 document 文档对象
             *  3.2 innerHTML 和 innerText
             *  3.3 Input xxx 输入框对象
             *  3.4 style 控制元素样式
         *  4. 元素标签CRUD
         *  5. BOM + DOM 使用案例 × 5
         *   *  5.1 获取 select 下拉框所有选项文本
             *  5.2 获取 select 下拉框被选中的选项文本和属性值
             *  5.3 新增一个 select 下拉框中的选项
             *  5.4 全选 & 全不选 & 反选
             *  5.5 注册表单的校验

> JavaScript = ECMAscript + BOM + DOM
> 
>  *  BOM：Browser Object Model，`浏览器对象模型`。
>  *  DOM：Document Object model，`文档对象模型`。

### 1. BOM ###

参考资料：[https://www.w3school.com.cn/jsref/index.asp][https_www.w3school.com.cn_jsref_index.asp]

#### 1.1 window ####

**属性**  
可以通过 window 对象获取其他4个BOM对象。

*  **document** 对 Document 对象的只读引用。
 *  **history** 对 History 对象的只读引用。
 *  **location** 用于窗口或框架的 Location 对象。可以设置页面跳转路径
 *  **Navigator** 对 Navigator 对象的只读引用。
 *  **Screen** 对 Screen 对象的只读引用。

**方法**  
window.xxx() 访问，也可省略 window.直接调用方法名。

*  `alert`(message) 显示带有一段消息和一个确认按钮的警告框。
 *  `confirm`(message) 显示带有一段消息以及确认/取消对话框。
 *  `prompt`(\[text\], \[defaultText\]) 显示可提示用户输入对话框。
 *  close() 关闭浏览器窗口 - 必须是新开的页面窗口才能关闭。
 *  `clearInterval`(重复对象) 清除由 setInterval() 设置的调用。
 *  `clearTimeout`(延迟对象) 清除由 setTimeout() 方法设置的调用。
 *  `setInterval`(code, millisec\[, “lang”\]) 按照间隔的周期(毫秒)来调用函数或计算表达式。返回值是重复对象
 *  `setTimeout`(code, millisec) 在延迟毫秒数后调用函数或计算表达式。返回值是延迟对象

**示例**

示例：时钟显示实时当前时间(动态刷新时间)

<html>
    <head>
        <title>JS BOM showTime</title>
        <script> function startShowTime() { setInterval("showTime()", 0); } function showTime() { var showTimeId = document.getElementById("showTime"); showTimeId.innerHTML = new Date().toLocaleString(); } </script>
    </head>
    <body onload="startShowTime()">
    当前时间：<span id="showTime" style="color: dodgerblue"></span>
    </body>
    </html>

![BOM+DOM][BOM_DOM]

#### 1.2 location ####

**属性**

*  **hash** 设置或返回从井号 (\#) 开始的 URL（锚）。
 *  **host** 设置或返回主机名和当前 URL 的端口号。
 *  **hostname** 设置或返回当前 URL 的主机名。
 *  **href** 设置或返回完整的 URL。
 *  **pathname** 设置或返回当前 URL 的路径部分。
 *  **port** 设置或返回当前 URL 的端口号。
 *  **protocol** 设置或返回当前 URL 的协议。
 *  **search** 设置或返回从问号 (?) 开始的 URL（查询部分）。

**方法**

*  `assign`() 加载新的文档。
 *  `reload`() 重新加载当前文档。
 *  `replace`() 用新的文档替换当前文档。

**示例**

#### 1.3 history ####

**属性**

*  **length** 返回浏览器历史列表中的 URL 数量。

**方法**

*  `back`() 加载 history 列表中的前一个 URL。相当于 上一页
 *  `forward`() 加载 history 列表中的下一个 URL。相当于 下一页
 *  `go`() 加载 history 列表中的某个具体页面。上一页 go(-1); 下一页 go(1);

**示例**  
demo10.jsp

<head>
        <title>BOM对象之History对象</title>
        <script> function fn1() { //下一页 history.forward(); } </script>
    </head>
    <body>
    demo10 demo10 demo10<br>
    <a href="demo11.jsp">跳转到demo11</a><br>
    <button onclick="fn1()">下一页</button>
    </body>

demo11.jsp

<head>
        <title>BOM对象之History对象</title>
        <script> function fn1() { // history.back(); history.go(-1) } function fn2() { // history.forward(); history.go(1) } </script>
    </head>
    <body>
    demo11 demo11 demo11<br>
    <button onclick="fn1()">上一页</button><br>
    <a href="demo12.jsp">跳转到demo12</a><br>
    <button onclick="fn2()">下一页</button><br>
    </body>

demo12.jsp

<head>
        <title>BOM对象之History对象</title>
        <script> function fn1() { history.back(); } </script>
    </head>
    <body>
    demo12 demo12 demo12<br>
    <button onclick="fn1()">上一页</button><br>
    </body>

#### 1.4 navigator ####

包含有关浏览器的信息。

#### 1.5 screen ####

包含有关客户端显示屏幕的信息。

### 2. xml DOM ###

参考资料：[https://www.w3school.com.cn/xmldom/xmldom\_reference.asp][https_www.w3school.com.cn_xmldom_xmldom_reference.asp]

**树形结构图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70]

#### 2.1 document 文档对象 ####

一棵xml文档树的根，访问文档对象最顶层的入口。  
包含：元素节点、文本节点、属性节点、注释。

**常用方法**

*  document.`createElement`() 创建元素节点。
 *  document.`createTextNode`() 创建文本节点。
 *  document.`getElementById`() 查找具有指定的唯一 ID 的元素。
 *  document.`getElementsByTagName`() 返回所有具有指定名称的元素节点。
 *  …

#### 2.2 element 元素对象 ####

xml文档中的元素。  
包含：元素节点、属性节点、文本节点。

**常用方法**

*  element.`setAttribute`(name, value) 添加新属性。
 *  element.`getAttribute`() 返回属性的值。- 获取对应属性值时，该属性必须显式的定义在标签上时才能正确获取到。
 *  element.`hasAttribute`() 返回元素是否拥有指定的属性。
 *  element.`removeAttribute`() 删除指定的属性。
 *  element.`appendChild`() 操作子节点(元素、属性、文本)。
 *  element.`getElementsByTagName`() 找到具有指定标签名的子孙元素。- 可通过 document 获取即可。
 *  …

#### 2.3 node 节点对象 ####

Node 对象是整个 DOM 的主要数据类型，节点对象代表文档树中的一个单独的节点。  
节点可以是元素节点、属性节点、文本节点。

**常用属性**

*  **childNodes** 返回节点到子节点的节点列表。
 *  **firstChild** 返回节点的首个子节点。
 *  **lastChild** 返回节点的最后一个子节点。
 *  **nodeType** 返回节点的类型。(节点类型值：`元素1，属性2，文本3(含换行符#text)，注释8，文档9`)
 *  **nodeValue** 设置或返回节点的值，根据其类型。
 *  **parentNode** 返回节点的父节点。
 *  …

**常用方法**

*  nodeObject.`appendChild`() 向节点的子节点列表的结尾添加新的子节点。
 *  nodeObject.`removeChild`() 删除（并返回）当前节点的指定子节点。
 *  nodeObject.`replaceChild`() 用新节点替换一个子节点。
 *  …

#### 2.4 xml DOM 使用案例 × 3 ####

demo(获取子节点类型)：

> 注意：从父节点获取子节点的 nodeObjects 时，其中包含了 \#text 换行符。

![BOM+DOM 换行符\#text][BOM_DOM _text]  
demo(添加/删除子div)：

demo(移除父div中首尾子div)：

### 3. html DOM ###

参考资料：[https://www.w3school.com.cn/jsref/index.asp][https_www.w3school.com.cn_jsref_index.asp]  
XML DOM 的文档访问和操作对象，同样可以访问和操作HTML文档，HTML DOM 定义了访问和操作 HTML 文档的标准方法，HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。

**树形结构图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 1]

#### 3.1 document 文档对象 ####

**常用方法**

*  document.`getElementById`() 获取具有指定的唯一 id 的元素。
 *  document.`getElementsByName`() 根据属性name获取一组元素。
 *  document.`getElementsByClassName`() 根据属性class获取一组元素。
 *  document.`getElementsByTagName`() 根据标签名称获取一组元素。  
    … + XML DOM document 方法

#### 3.2 innerHTML 和 innerText ####

两个均为属性。  
innerHTML 设置/获取标签`内容`，innerText 设置/获取标签`纯文本`。  
demo(两者区别)：

#### 3.3 Input xxx 输入框对象 ####

**常用对象**

*  Input Button
 *  Input Checkbox
 *  Input File
 *  Input Hidden
 *  Input Password
 *  Input Radio
 *  Input Reset
 *  Input Submit
 *  Input Text

Input Text 对象。即 每个<input type=“text”>对应1个 Text 标签。  
demo(获取输入框里的内容)：

#### 3.4 style 控制元素样式 ####

**核心对象**

*  Style 对象

格式：`元素对象.style.样式名 = "样式值";`

### 4. 元素标签CRUD ###

![BOM+DOM][BOM_DOM 1]

### 5. BOM + DOM 使用案例 × 5 ###

#### 5.1 获取 select 下拉框所有选项文本 ####

#### 5.2 获取 select 下拉框被选中的选项文本和属性值 ####

#### 5.3 新增一个 select 下拉框中的选项 ####

三合一 源码示例：

![BOM+DOM][BOM_DOM 2]

#### 5.4 全选 & 全不选 & 反选 ####

![BOM+DOM][BOM_DOM 3]

#### 5.5 注册表单的校验 ####

![BOM+DOM][BOM_DOM 4]

[https_www.w3school.com.cn_jsref_index.asp]: https://www.w3school.com.cn/jsref/index.asp
[BOM_DOM]: /images/20230312/0c32e615e37141d9a0b80f13c9d42a5f.png
[https_www.w3school.com.cn_xmldom_xmldom_reference.asp]: https://www.w3school.com.cn/xmldom/xmldom_reference.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70]: /images/20230312/101209f40a654eeba26341cce9b4c1fa.png
[BOM_DOM _text]: /images/20230312/194aee4469db49e9bdc4c89ab2117b28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2MTg0MDc1_size_16_color_FFFFFF_t_70 1]: /images/20230312/8b4ef2d5db60487d9dcd4ec3610145ea.png
[BOM_DOM 1]: /images/20230312/cca8a3f4795c40b4b97ee2693d34dfea.png
[BOM_DOM 2]: /images/20230312/892af313c8fa4a23a191b1fef4715625.png
[BOM_DOM 3]: /images/20230312/d467a55d883e4386abe1cac67d8cf745.png
[BOM_DOM 4]: /images/20230312/cdec5fe0ca4a42eb83f2c19916d7b8ba.png