087学习js-文档对象

曾经终败给现在 2022-09-11 02:28 139阅读 0赞

参考链接: W3school-JavaScript HTML DOM  
参考文章:Han\_python的博客的[JavaScript][]专栏 14.

## 文档对象模型 ##

Document Object Mode, 简称DOM。当网页被加载时，浏览器会创建页面的DOM。它定义了:

> **作为对象**的 HTML 元素,  
> HTML 元素的**属性**（可设置或改变）  
> 访问所有 HTML 元素的**方法**（动作）  
> 所有 HTML 元素的**事件**

HTML DOM 模型被结构化为对象树：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_13_color_FFFFFF_t_70_g_se_x_16]

### 方法`getElementById()` 和属性`innerHTML` ###

<body>
    
    	<p id="p01">The best things in life are free!</p>
    	<p id="demo">这个文本不显示,因为下面第二条又写了一次</p>
    
    	<script>
    		text = document.getElementById("p01").innerHTML; 
    		document.getElementById("demo").innerHTML = "上面说得有道理";
    	</script>
    </body>

![在这里插入图片描述][bf82f210669a4365882f8b5ad73a893b.png]  
例子中，

> `getElementById()`使用 `id="demo"` 来查找元素。  
> 使用 `innerHTML` 属性先获取，后替换元素内容。

`innerHTML` 属性可用于获取或改变任何 HTML 元素，包括 `<html> 和 <body>`.  
但是,对于没有内容的元素.如自结束标签，这个属性没有意义(`input,img等`)。

*  **提醒：**

> 下面的js**函数/属性操作**都是写在`<script>`内，**展示内容**都是在`<body>`内。前者可以在后者内,或外。 不再赘述。

#### 改变属性的值 ####

document.getElementById(id).attribute = new value

<body>
        <img id="myImage" src="smiley.gif">
    
        <script>
            document.getElementById("myImage").src = "landscape.jpg";
        </script>
    </body>

原始图像是 smile.gif，但脚本将其更改为 landscape.jpg

### 找元素 ###

查找 HTML 页面中的元素,还可以是以下方法:

var x = document.getElementsByTagName("p");
    // 查找: 所有 <p> 元素
    // 访问: x[0].innerHTML
    
    var id_main = document.getElementById("main");
    var y = id_main.getElementsByTagName("p"); 
    // 首先查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素

还可以通过类名`document.getElementsByClassName("intro")`,通过css选择器`document.querySelectorAll("p.intro");`来查找。

#### 视频的一些操作 ####

![在这里插入图片描述][122423595bac4f47b0f2023ad9e8f6f8.png]

此外,还可以使用以下方式,来改变video的一些属性值:[JS调整视频倍速和视频跳转][JS]  
按F12，找到console，输入

document.querySelector("video").playbackRate=2.5    
    document.querySelector("video").currentTime=60

其中,第一个是设置倍速为2.5; 视频跳转到1分钟,600就是10分钟

可以看到,视频有`controlslist=nodownload`,导致无法下载,那么,可以使用下面的办法消除:  
参考[video.controlslist=nodownload][video.controlslist_nodownload]

document.querySelector('video').hasAttribute("controlslist")		# true
    document.querySelector('video').removeAttribute("controlslist")		# undefined

还可以看到,`tableindex=-1`,本来,这个属性是获取html焦点的,规定元素的 tab 键次序。即连续按TAB键,可以变换焦点。取-1时，就获取不到了。  
[TABINDEX 属性][TABINDEX]

还可以看到:`oncontextmenu='return false'`,禁止右键 [οncοntextmenu=“return false” ：禁止右键][nc_ntextmenu_return false_]

还有,`video.data-setup={}`,可以参考这里:[video js选项][video js]

data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'

#### js获取`form`表单中的所有元素 ####

<!DOCTYPE html>
    <html>
    
    <body>
    
        <h1>使用 document.forms 查找 HTML 元素</h1>
    
        <form id="frm1" action="/demo/action_page.php">
            First name: <input type="text" name="fname" value="Bill"><br>
            Last name: <input type="text" name="lname" value="Gates"><br><br>
            <input type="submit" value="提交">
        </form>
    
        <p>单击“试一试”按钮，显示表单中每个元素的值。</p>
    
        <button onclick="myFunction()">试一试</button>
    
        <p id="demo"></p>
    
        <script>
            function myFunction() {
        
                var x = document.forms["frm1"];
                var text = "";
                var i;
                for (i = 0; i < x.length; i++) {
        
                    text += x.elements[i].value + "<br>";
                }
                document.getElementById("demo").innerHTML = text;
            }
        </script>
    
    </body>
    
    </html>

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

### 点击事件`onclick` ###

当用户点击 `<h1>` 时，会改变为`谢谢！`

<body>
    	<h1 onclick="this.innerHTML='谢谢！'">请点击此文本！</h1>
    </body>

还可以传入函数(注意是函数，不是对象)：

<body> 
    	<button onclick="pop_alert()">我是一个按钮</button>
    </body>
    <script type="text/javascript">
    	function pop_alert(){
        
    		alert("你点我干嘛");
    	};
    </script>

它和下面的是一样的：

<body> 
    	<button id="btn">我是一个按钮</button>
    </body>
    <script type="text/javascript">
    	var btn = document.getElementById("btn");
    	btn.onclick = function(){
        
    		alert("你点我干嘛");
    	};
    </script>

![在这里插入图片描述][ec3dba7ddb9e4773bb9e5fa203af1f26.png]  
或者直接写成：

document.getElementById("btn").onclick = pop_alert;

注意，这里是一个对象`pop_alert`，不是函数`pop_alert()`.

#### 鼠标事件 ####

`onmouseover` 和 `onmouseout` 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数

// 注意,这个地方传入了this对象。
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" >请把鼠标移上来</div>
    
    function mOver(obj) {
        
      obj.innerHTML = "谢谢您"
    }
    function mOut(obj) {
        
      obj.innerHTML = "请把鼠标移上来"
    }

当鼠标按钮被点击时，`onmousedown` 事件被触发；然后当鼠标按钮被释放时，`onmouseup` 事件被触发；最后，当鼠标点击完成后，`onclick` 事件被触发。

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
    style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
    点击鼠标</div>
    
    function mDown(obj) {
        
      obj.style.backgroundColor = "#1ec5e5";
      obj.innerHTML = "松开鼠标";
    }
    function mUp(obj) {
        
      obj.style.backgroundColor="#D94A38";
      obj.innerHTML="谢谢您";
    }

#### 文本改变事件 ####

`onfocus`,当输入字段获得焦点时改变其背景色

function myFunction(x) {
        
      x.style.background = "yellow";
    }
    请输入您的名字：<input type="text" onfocus="myFunction(this)">

![在这里插入图片描述][a6504d5734104c9a9e4c4cb57b6ee08e.png]

`onchange`，经常与输入字段验证结合使用。下面，离开输入字段时，会触发一个函数，将输入文本转换为大写。

function myFunction() {
        
      var x = document.getElementById("fname");
      x.value = x.value.toUpperCase();	// 这里读取了元素的属性值，下一小节将更多
    }
    请输入您的名字：<input type="text" id="fname" onchange="myFunction()">

#### 页面打开/关闭事件 ####

`onload`事件：一张页面或者一幅图像完成加载。支持该事件的JS对象有：`image、layer、window`。

<head>
        <script type="text/javascript">
            window.onload = function(){
        		// 使script中的代码在页面加载完成之后执行。
                var btn = document.getElementById("btn");
                btn.innerHTML = "I am Button";
                btn.onclick = function(){
        
                    alert("你点我干嘛");
                };	
            };
        </script>    
    </head>
    <body>
        <button id="btn"></button>
    </body>

此外，当用户进入后及离开页面时，会触发 `onload` 和 `onunload` 事件。它们可用于处理 cookie。

<body onload="checkCookies()">
    	<p id="demo"></p>
    
    	<script>
    	function checkCookies() {
        
    	  var text = "";
    	  if (navigator.cookieEnabled == true) {
        
    	    text = "Cookie 已启用";
    	  } else {
        
    	    text = "Cookie 未启用";
    	  }
    	  document.getElementById("demo").innerHTML = text;
    	}
    	</script>
    </body>

#### 读获取到的对象的`value`等 ####

这个例子中，读到了`id=“fname”`的`value`。

function myFunction() {
        
      var x = document.getElementById("fname");
      x.value = x.value.toUpperCase();	// 这里读取了元素的属性值，下一小节将更多
    }

如果要读取元素节点属性，直接使用：`元素.属性名`  
例如

> 元素.`id`  
> 元素.`name`  
> 元素.`value`  
> 元素.`className`,这里因为`class`是保留字,所以换了一个

### 其他 ###

改变 HTML 元素  
添加和删除元素  
查找 HTML 对象,如`forms,images,head`等  
参见:[JavaScript HTML DOM 文档][JavaScript HTML DOM]

[JavaScript]: https://blog.csdn.net/han_python/category_10692377.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/443f498f6b3e43eeaa206454199a8730.png
[bf82f210669a4365882f8b5ad73a893b.png]: /images/20220828/3df6d94a65b84f7d9839bdd44d384370.png
[122423595bac4f47b0f2023ad9e8f6f8.png]: /images/20220828/d6b4243bd6744c1584467ee45e46142e.png
[JS]: https://blog.csdn.net/MrFlySand/article/details/120052728
[video.controlslist_nodownload]: https://blog.csdn.net/sonichty/article/details/115877822
[TABINDEX]: http://www.360doc.com/content/20/0401/23/68275505_903285148.shtml
[nc_ntextmenu_return false_]: https://blog.csdn.net/eddioio/article/details/60968747
[video js]: https://blog.csdn.net/jesus392235020/article/details/48469263
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6JOd6JOd55qE5pys5oiR_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8fdb481ae2d54b3baf7b2d982a8f12c7.png
[ec3dba7ddb9e4773bb9e5fa203af1f26.png]: /images/20220828/e28d83e0816a41f0882f228645d7f02e.png
[a6504d5734104c9a9e4c4cb57b6ee08e.png]: /images/20220828/10e62e83ed0640d597117a71179884d7.png
[JavaScript HTML DOM]: https://www.w3school.com.cn/js/js_htmldom_document.asp