前端 -- JavaScript-DOM

時間 2019-11-15

標籤前端 javascript dom 欄目 JavaScript 简体版

原文原文鏈接

11.3.16 DOM

什麼是DOM?html

document object model 文檔對象模型前端

DOM樹:python

整個文檔就是一棵樹,樹當中的每個節點都是一個對象:這個對象中維繫着屬性信息,文本信息,關係信息web
整個文檔是從上到下依次加載的,當加載到script標籤的時候,會有一個特殊的變量提高的解析方法,致使後定義的函數能夠提早被調用數組

在頁面上還有一些動做效果:根據人的行爲改變的--點擊,鼠標懸浮,自動改變的app

js是怎麼給前端的web加上動做的?函數

找到對應的標籤this
給標籤綁定對應的時間spa
操做對應的標籤code

1. 查找標籤

1.1 直接查找

var a = document.getElementById('標籤的id')           // 經過ID查找,直接返回一個元素對象
console.log(a)
var sons = document.getElementsByClassName('標籤的類名')  // 經過類名查找,返回元素組成的數組
console.log(sons)
sons[0] //獲取到一個標籤對象  
var divs = document.getElementsByTagName('標籤名')    // 經過標籤查找,返回元素組成的數組
console.log(divs)

</ 經過ClassName和TagName得到的標籤數組,想要使用某個標籤必須經過索引獲取該標籤對象

1.2 間接查找

找父親
var a = document.getElementById('baidu')         
console.log(a)
var foodiv = a.parentNode          // 獲取到父節點的對象,返回一個

找兒子
var foo= document.getElementById('foo')
foo.children          // 獲取全部的子節點,返回一個數組
foo.firstElementChild // 獲取第一個子節點
foo.lastElementChild  // 獲取最後一個子節點

找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
son1.nextElementSibling     // 找下一個兄弟 返回一個對象
son1.previousElementSibling // 找上一個兄弟 返回一個對象

2. 操做自己的標籤

2.1 標籤的建立

var obj = document.createElement('標籤名')   // a div ul li span
obj就是一個新建立出來的標籤對象

2.2 標籤的添加

父節點.appendChild(要添加的節點) //添加在父節點的兒子們以後
先建立標籤
    var obj = document.createElement('a')
    obj.innerText='JD'
獲取父節點,再添加標籤
    var fath = document.getElementById('foo')
    fath.appendChild(obj)


父節點.insertBefore(要添加的節點,參考兒子節點) //添加在父節點的某個兒子以前
先建立標籤
    var obj = document.createElement('a')
    obj.innerText='JD'
獲取父節點和參考節點,再添加標籤
    var fath = document.getElementById('foo')
    var seq = document.getElementById('son1')
    fath.insertBefore(obj,seq)

2.3 標籤的刪除

父節點.removeChild(要刪除的子節點)
先找到父節點和要刪除的子節點
    var fath = document.getElementById('foo')
    var seq = document.getElementById('son1')
    fath.removeChild(seq)

子節點1.parentNode.removeChile(子節點2)
先找出子節點1,經過子節點1找到父節點,再刪除子節點2
    var seq = document.getElementById('son1')
    var seq1 = document.getElementById('son2')
    seq.parentNode.removeChild(seq1)

2.4 標籤的替換

父節點.replaceChild(新標籤,舊兒子)
先找父節點和須要替換的子節點,建立新的標籤
    var obj = document.createElement('a')
    obj.innerText='JD'
    var fath = document.getElementById('foo')
    var seq = document.getElementById('son1')
    fath.replaceChild(obj,seq)

2.5 標籤的複製

節點.cloneNode()     //只克隆一層
節點.cloneNode(true) //克隆本身和全部的子子孫孫
注意 :若是克隆出來的標籤的id是重複的,那麼修改以後才能應用到頁面上

3. 節點的屬性操做

節點對象.getAttribute('屬性名')    //獲取標籤對象
節點對象.setAttribute('屬性名','屬性值') //添加標籤屬性
節點對象.removeAttribute('屬性名')  //刪除標籤屬性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .odiv{
            width: 100px;
            height: 100px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div id="outer"></div>
    <button id="b1">顯示</button>
    <button id="b2">隱藏</button>
</body>
<script>
    // var aobj = document.createElement('a')  // 1.建立標籤
    // var fath = document.getElementById('outer') // 2.獲取父標籤
    // fath.appendChild(aobj) // 3.添加標籤
    // aobj.innerText = '百度一下'
    // aobj.getAttribute('href') //獲取標籤對象
    // aobj.setAttribute('href','http://www.baidu.com') // 4.添加標籤屬性
    // aobj.removeAttribute('href') //刪除標籤屬性
    var b1 = document.getElementById('b1')
    b1.onclick = function () {
        var obj = document.getElementById('outer')
        obj.setAttribute('class','odiv')
    }
    var b2 = document.getElementById('b2')
    b2.onclick = function () {
        var obj = document.getElementById('outer')
        obj.removeAttribute('class')
    }
    // console.log(fath)
</script>
</html>

4. 節點的文本操做

節點對象.innerText = '只能寫文字'
節點對象.innerHTML = '能夠放標籤'

5. 點的值操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="user" id="user">
-------------------------------------------------------        
    <select name="city" id="city">
        <option value="1" selected>北京</option>
        <option value="2">天津</option>
    <option value="3">上海</option>
</select>
</body>
<script>
    var inp = document.getElementById('user')
    // inp.setAttribute('value','Agoni')
    // inp.removeAttribute('value')
    inp.value='barry'
    inp.value=null
---------------------------------------------------------
    var st = document.getElementById('city')
        st.value  // 查看值
        st.value='2' // 天津
        st.value='3' // 上海
</script>
</html>

6. 節點的類操做

className  獲取全部樣式類名(字符串)
首先獲取標籤對象
標籤對象.classList.remove(cls)    //刪除指定類
標籤對象.classList.add(cls)       //添加類
標籤對象.classList.contains(cls)  //存在返回true，不然返回false
標籤對象.classList.toggle(cls)    //存在就刪除,不然添加,toggle的意思是切換,有就刪除,若是沒有就加一個

7. 事件

</head>
<body>
    <button id="btn">點擊一下</button>
</body>
<script>
        //綁定事件方法一
    var btn = document.getElementById('btn') // 獲取事件源
    btn.onclick = function () {  //綁定事件
        alert('別點我')           //寫事件驅動程序
    }
        //綁定事件方法二
    // btn.onclick = click
    // function click() {
    //     alert('點我幹嗎')
    // }
</script>
</html>

7.1 頁面廣告例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .ad{
            background-color: green;
            position: fixed;
            padding: 5px;
            width: 100%;
            height: 50px;
            color: yellow;
            text-align: center;
            line-height: 50px;
        }
        button{
            float: right;
        }
    </style>
</head>
<body>
    <div class="ad">
        python23期皇家賭場開業了,性感荷官在線發牌
        <button id="close">x</button>
    </div>
    <div class='content'>
        我是正文內容
        <img src="0.jpg" alt="">
        <img src="1.jpg" alt="">
    </div>
</body>
<script>
    var btn = document.getElementById('close')
    btn.onclick = function () {
        this.parentNode.style.display = 'none'
    }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。