DOM

文檔對象模型（Document Object Model, DOM）是一種用於HTML和XML文檔的編程接口，它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現方式。

查找元素

1、直接查找

document.getElementById('i1') 根據id獲取單個元素
document.getElementsByName('n') 根據name屬性獲取標籤集合
document.getElementsByTagName('div') 根據標籤名獲取標籤集合 
document.getElementsByClassName('c1') 根據class屬性獲取標籤集合

2、間接查找

parentElement	//父節點標籤元素
children	//所有子標籤
firstElementChild	//第一個子標籤元素
lastElementChild	//最後一個子標籤元素
nextElementSibling	//下一個兄弟標籤元素
previousElementSibling	//上一個兄弟標籤元素

操作元素

內容

innerText 僅文本
outerText
innerHTML 全部內容
value 
	input 	對於input系列生效，獲取當前標籤中的值或者改變它的值
	select 獲取選中的值（除了value，還有一個selectedIndex）
	textarea 獲取當前標籤中的值或者改變它的值

搜索框的示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="width: 600px; margin: 0 auto;">
            <!-- onfocus: 當標籤獲取焦點時，執行函數 onblur: 失去焦點，執行函數-->
            <input id="i1" οnfοcus="Focus();" οnblur="Blur();" type="text" value="請輸入關鍵字" />
        </div>
        <script>
            function Focus(){
                var tag = document.getElementById('i1');
                var val = tag.value;
                if(val == "請輸入關鍵字"){
                    tag.value = "";
                }
            }
            function Blur(){
                var tag = document.getElementById('i1');
                var val = tag.value;
                if(val.length == 0){
                    tag.value = "請輸入關鍵字";
                }
            }
        </script>
    </body>
</html>

樣式操作

className //直接整體做操作
classList
classList.add("樣式名")
classList.remove("樣式名")

obj.style.fontSize = "16px";
obj.style.backgroundColor = "red";
obj.style.color = "blue";

屬性操作

attributes //獲取所有標籤的屬性
setAttribute(key, value) //設置標籤屬性
getAttribute
removeAttribute

標籤
1、創建標籤

// 方式一
var tag = document.createElement('a');
tag.innerText = "xue";
tag.className = "c1";
tag.href = "https://blog.csdn.net/weixin_40318474";

// 方式二
var tag = "<a class="c1" href="https://blog.csdn.net/weixin_40318474">xue</a>";

2、操作標籤

// 方式一
var obj = "<input type="text" />";
xxx.insertAdjacentHTML("beforeEnd", obj);
xxx.insertAdjacentElement("afterBegin", document.createElement('p'));
// 注意：第一個參數只能是'beforeBegin'、'afterBegin'、'beforeEnd'、'afterEnd'

// 方式二
var tag = document.createElement('a');
xxx.appendChild(tag);
xxx.insertBefore(tag, xxx[1]);

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" οnclick="addEle1();" value="+" />
        <input type="button" οnclick="addEle2();" value="+" />
        <div id="i1">
            <input type="text" />
            <hr />
        </div>
        <script>
            function addEle1(){
                // 創建一個標籤
                // 將標籤添加到i1裏面
                var tag = "<input type='text' />";
                document.getElementById('i1').insertAdjacentHTML("beforeEnd", tag);
            }
            function addEle2(){
                // 創建一個標籤
                // 將標籤添加到i1裏面
                var tag = document.createElement('input');
                tag.setAttribute('type', 'text');
                tag.style.fontSize= '16px';
                tag.style.color = 'red';

                var p = document.createElement('p');
                p.appendChild(tag);

                document.getElementById('i1').appendChild(p );
            }
        </script>
    </body>
</html>

提交表單

// 任何標籤通過DOM都可以提交表單
document.getElementById('form').submit

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form id="f1" action="http://www.baidu.com">
            <input type="text" />
            <input type="submit" value="提交" />
            <a οnclick="submitForm();">提交吧</a>
        </form>
        <script>
            function submitForm(){
                document.getElementById('f1').submit()
            }
        </script>
    </body>
</html>

其它操作

console.log		輸出框
alert 			彈出框
confirm			確認框
	var v = confirm("真的要刪除嗎？");
	console.log(v); // 輸出true or false

// URL和刷新
location.href			獲取URL,也可以設置當前URL，跳轉到設置的頁面
location.href = "url"	重定向
location.reload()		重新加載 ==> location.href == location.herf

// 定時器
setInterval			多次定時器
clearInterval		清除多次定時器
//用法：定時器已知在執行，這兩個一般都是一起用的
	var obj = setInterval(function(){
		console.log(1)
		clearInterval(obj) // 放這，只輸出一次
	}, 5000)
	clearInterval(obj) // 放這，沒任何輸出
	
setTimeout			單次定時器
clearTimeout		清除單次定時器，當你嫌等的時間太久了就可以用這個讓他停下來
//用法：定時器只執行一次，這兩個一般都是分開用的
	var obj = setTimeout(function(){
		console.log("timeout")
	}, 5000) //5秒鐘之後出現打印信息

setTimeout應用：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="status"></div>
        <input type="button" value="delete" οnclick="deleteEle();" />
        <script>
            function deleteEle(){
                document.getElementById('status').innerText = "已刪除";
                setTimeout(function(){
                    document.getElementById('status').innerText = "";
                }, 5000);
            }
        </script>
    </body>
</html>

事件

上面的內容我們已經學過了三種事件onclick onblur onfocus
先來做一個面試題，寫一個行爲、樣式、結構相分離的界面？
分析：行爲即js，樣式即css，結構即html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            // 樣式
            #i1{
                background-color: red;
                height: 400px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <!--div id="i1" οnclick="t1();"-->
        <div id="i1">
            結構
        </div>
        <script>
            //function t1(){
            //    console.log(1);
            //}
            // 行爲
            var myDiv = document.getElementById("i1");
            //console.log(myDiv);
            myDiv.onclick = function(){
                console.log("sadf")
            }
        </script>
    </body>
</html>

新的事件onmouseover onmouseout
示例：實現鼠標移到標籤上面高亮顯示的功能，並且把結構、行爲、樣式相分離。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #i1{
				border: 1px solid red;
				width: 300px;
			}
        </style>
    </head>
    <body>
        <table id="i1">
            <!--
            <tr οnmοuseοver="t1(0);" οnmοuseοut="t2(0);"><td>1</td><td>2</td><td>3</td></tr>
            <tr οnmοuseοver="t1(1);" οnmοuseοut="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
            <tr οnmοuseοver="t1(2);" οnmοuseοut="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
            -->
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>1</td><td>2</td><td>3</td></tr>
        </table>
        <script>
            //function t1(n){
            //    var myTrs = document.getElementsByTagName("tr")[n];
            //    //console.log(myTrs);
            //    myTrs.style.backgroundColor = "red";
            //}
            //function t2(n){
            //    var myTrs = document.getElementsByTagName("tr")[n];
            //    //console.log(myTrs);
            //    myTrs.style.backgroundColor = "";
            //}
            var myTrs = document.getElementsByTagName("tr");
            var len = myTrs.length;
            for(var i=0; i<len; i++){
                myTrs[i].onmouseover = function(){
                	//這裏爲什麼不能用myTrs[i]，而只能用this呢？
                	//答：i的作用域導致的
                    this.style.backgroundColor = "red"; // 誰調用這個函數，this就指向誰
                }
                myTrs[i].onmouseout = function(){
                    this.style.backgroundColor = ""; // 誰調用這個函數，this就指向誰
                }
            }
        </script>
    </body>
</html>

Dom綁定時間
例子:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            // 樣式
            #i1{
                background-color: red;
                height: 400px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <!--div id="i1" οnclick="t1();"-->
        <div id="i1">
            結構
        </div>
        <script>
            var myDiv = document.getElementById("i1");
            // 點擊一次div標籤，同時打印兩條信息，可以拿來做一次點擊，出現兩個彈窗的功能
            myDiv.addEventListener('click', function(){console.log('aaa')}, false);
            myDiv.addEventListener('click', function(){console.log('bbb')}, false);
        </script>
    </body>
</html>

示例如下，面試題：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #main{
                background-color: red;
                height: 400px;
                width: 300px;
            }
            #content{
                background-color: pink;
                height: 200px;
                width: 150px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="content"></div>
        </div>
        <script>
            var myMain = document.getElementById("main");
            var myContent = document.getElementById("content");
            // 點擊一次div標籤，同時打印兩條信息，可以拿來做一次點擊，出現兩個彈窗的功能
            myMain.addEventListener('click', function(){console.log('main')}, false);
            myContent.addEventListener('click', function(){console.log('content')}, false);
        </script>
    </body>
</html>

上面的代碼，第三個參數爲false時，點擊粉色區域，先打印content，在打印mian，爲true時，剛好反過來

小結：
	綁定事件三種方式：
		a.直接標籤綁定 onclick='xxx()'
			<input type="button" onclick="ClivkOn(this)" />
			function ClickOn(self){
				//self 當前點擊的標籤
			}
		b.先獲取Dpm對象，然後進行綁定
			<input id="i1" type="button" />
			document.getElementById('xx').onclick = function(){
				//this 當前點擊的標籤
			}
		c.綁定時間
			var myDiv = document.getElementById("i1");
            // 點擊一次div標籤，同時打印兩條信息，可以拿來做一次點擊，出現兩個彈窗的功能
            myDiv.addEventListener('click', function(){console.log('aaa')}, false);
            myDiv.addEventListener('click', function(){console.log('bbb')}, false);

73、

發佈了49 篇原創文章 · 獲贊 41 · 訪問量 9354

私信關注

查找元素

操作元素

事件

C#開源的兩款功能強大的錄屏神器

認知提升的方法

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

vex edr v5之軸角編碼器和超聲波傳感器

python基礎2_1-列表、元組、字符串、字典、集合

css-後臺頁面管理佈局和圖標的使用

python基礎4_1-裝飾器(decorator)

JavaScript跑馬燈實例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結