BOM&DOM

阿新 • • 發佈：2020-08-07

BOM 瀏覽器物件模型

window物件的子物件中的location

location.href   獲取當前url:"https://www.cnblogs.com/clschao/articles/10092991.html"
location.href="URL" // 跳轉到指定頁面
	示例:location.href = 'http://www.baidu.com';直接跳轉到百度
location.reload() 重新載入頁面,就是重新整理一下頁面

計時器相關(計時器是非同步的)

setTimeout 計時器,一段時間之後做某些事情

setTimeout('confirm("你好");',3000);  #3秒之後執行前面的js程式碼
setTimeout(confirm('xxx'),3000);  #如果寫的不是字串,會直接執行
setTimeout(function(){confirm('xxx')},3000);  #最好寫成函式

var a = setTimeout(function(){console.log('xxx')},3000);  #a是瀏覽器來記錄計時器的一個隨機數字
clearTimeout(a)  #清除計時器,通過這個數字可以清除

setInterval 計時器,每隔一段時間做某些事情

var a = setInterval(function(){console.log('xxx')},3000);  
clearInterval(a);

DOM

選擇器

直接查詢

document.getElementById           根據ID獲取一個標籤
document.getElementsByClassName   根據class屬性獲取（可以獲取多個元素，所以返回的是一個數組）
document.getElementsByTagName     根據標籤名獲取標籤合集
示例:
	<div class="c1" id="d1">
    	待到將軍歸來日,朕與將軍解戰袍!
	</div>

	<div class="c1" id="d2">
    	日照香爐生紫煙,遙看瀑布掛前川!
	</div>
	
	var a = document.getElementById('d1');  # 獲取id屬性值為d1的標籤  拿到的直接是標籤物件
	var a = document.getElementsByClassName('c1'); #獲取class值為c1的所有標籤  拿到的是陣列
	var a = document.getElementsByTagName('div');  #獲取所有div標籤  拿到的是陣列

間接查詢

var a = document.getElementById('d1');
a.parentElement; #獲取a這個標籤的父級標籤.
children                 所有子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

節點操作

建立節點(建立標籤) 
	var a = document.createElement('標籤名稱'); 
	示例,建立a標籤
		var a = document.createElement('a');
	var dd = document.getElementById('dd'); 找到div標籤
	
新增節點
	#新增節點,新增到了最後
	dd.appendChild(a);將建立的a標籤新增到dd這個div標籤裡面的最後.

	#在某個節點前面新增節點
	父級標籤.insertBefore(新標籤,某個兒子標籤)
	示例
		var dd = document.getElementById('dd');  #找到父級標籤
		var a = document.createElement('a');   #建立一個新的a標籤
		var d2 = dd.children[1];  #找到父級標籤下的某個兒子標籤
		dd.insertBefore(a,d2);   #將a標籤插入到上面這個兒子標籤的前面.
刪除節點
	dd.removeChild(d2);  父級標籤中刪除子標籤
        
替換節點
	var dd = document.getElementById('dd');  #找到父級標籤
	var a = document.createElement('a');  #建立a標籤
	a.innerText = '百度';  
	var d1 = dd.children[0];  #找到要被替換的子標籤
	dd.replaceChild(a,d1);  #替換

文字操作

d1.innerText; 檢視

設定:
	d1.innerText = "<a href=''>百度</a>";  
	d1.innerHTML = "<a href=''>百度</a>";  能夠識別標籤

屬性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比較規範的寫法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還可以直接.屬性名來獲取和設定，如果是你自定義的屬性，是不能通過.來獲取屬性值的
imgEle.src
imgEle.src="..."

值操作

var inp = document.getElementById('username');
inp.value;  #檢視值
inp.value = 'taibai'; #設定值

選擇框:
	<select name="city" id="city">
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
    </select>
	
	var inp = document.getElementById('city');
	inp.value;  #檢視值
	inp.value = '1';  #設定值

class的操作

var d = document.getElementById('oo'); 
d.classList;  #獲得這個標籤的class屬性的所有的值
d.classList.add('xx2');  #新增class值
d.classList.remove('xx2'); #刪除class值
d.classList.contains('xx2');  #判斷是否有某個class值,有返回true,沒有返回false
d.classList.toggle('xx2');  #有就刪除,沒有就增加

css操作

var d = document.getElementById('oo');
d.style.backgroundColor = 'deeppink';  有橫槓的css屬性,寫法要去掉橫槓,並且橫槓後面的單詞首字母大寫
d.style.height = '1000px'

事件

繫結事件的方式有兩種

方式1:

<div id="d1" class="c1" onclick="f1();"></div>

<script>
    function f1() {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'yellow';
    }

</script>

方式2

	<div id="d1" class="c1"></div>

    var d = document.getElementById('d1');
    d.onclick = function () {
        d.style.backgroundColor = 'yellow';
    }

事件裡面的this

繫結方式1:

this表示當前標籤物件
<div id="d1" class="c1" onclick="f1(this);"></div>
function f1(ths) {
        // var d = document.getElementById('d1');
        // d.style.backgroundColor = 'yellow';
        ths.style.backgroundColor = 'yellow';

        var d = document.getElementById('d2');
        d.style.backgroundColor = 'yellow';
    }

方式2:

    <div id="d1" class="c1"></div>
    
    var d = document.getElementById('d1');
    d.onclick = function () {
        this.style.backgroundColor = 'yellow';
        // d.style.backgroundColor = 'yellow'; //this表示當前標籤物件
    }

onblur和onfocus事件

 var inp = document.getElementById('username');
    inp.onfocus = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'pink';
    };
    // onblur 失去游標時觸發的事件

    inp.onblur = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'green';
    };

onchange事件,域內容發生變化時觸發

<select name="" id="jishi">
    <option value="1">太白</option>
    <option value="2">alex</option>
    <option value="3">沛齊</option>

</select>

// onchange事件，內容發生變化時觸發的事件
    var s = document.getElementById('jishi');
    s.onchange = function () {
    	//this.options  select標籤的所有的option標籤
    	//this.selectedIndex被選中的標籤在所有標籤中的索引值
        console.log(this.options[this.selectedIndex].innerText + '搓的舒服');
    }
    
    
使用者名稱:<input type="text" id="username">    

    //input標籤繫結onchange事件
    var inp = document.getElementById('username');
    inp.onchange = function () {
        console.log(this.value);  
    };