DOM學習筆記

時間 2019-11-12

標籤 dom 學習筆記欄目 HTML 简体版

原文原文鏈接

DOM的定義

文檔對象模型（Document Object Model）是一種用於HTML和XML文檔的編程接口。DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。html

查找元素

一、直接查找

document.getElementById             # 根據ID獲取一個標籤
document.getElementsByName          # 根據name屬性獲取標籤集合
document.getElementsByClassName     # 根據class屬性獲取標籤集合
document.getElementsByTagName       # 根據標籤名獲取標籤集合

二、間接查找

parentNode             # 父節點
childNodes             # 全部子節點
firstChild             # 第一個子節點
lastChild              # 最後一個子節點
nextSibling            # 下一個兄弟節點
previousSibling        # 上一個兄弟節點
 
parentElement          # 父節點標籤元素
children               # 全部子標籤
firstElementChild      # 第一個子標籤元素
lastElementChild       # 最後一個子標籤元素
nextElementtSibling    # 下一個兄弟標籤元素
previousElementSibling # 上一個兄弟標籤元素

內容操做

innerText   # 文本
outerText   
innerHTML   # HTML內容(包括元素、註釋和文本節點)
value       # 獲取input/select/textarea裏面輸入的內容

屬性操做

attributes                # 獲取全部標籤屬性
setAttribute(key,value)   # 設置標籤屬性
getAttribute(key)         # 獲取指定標籤屬性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

標籤操做

一、建立標籤

# 方法一
var tag = document.createElement('a')
tag.innerText = "百度"
tag.href = "http://www.baidu.com"
 
// 方式二
var tag = "<a href='http://www.baidu.com'>baidu</a>"

二、操做標籤

# 方法一
var obj = "<input type='text' />";
obj.insertAdjacentHTML("beforeEnd",obj);
obj.insertAdjacentElement('afterBegin',document.createElement('p'))
 
#注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
# 方法二
var tag = document.createElement('a')
tag.appendChild(tag)
tag.insertBefore(tag,tag[1])

樣式操做

<div class="c1">百度一下，你就知道</div>

var obj = document.getElementById('c1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

位置操做

# 總文檔高度
document.documentElement.offsetHeight
  
# 當前文檔佔屏幕高度
document.documentElement.clientHeight
  
# 自身高度
tag.offsetHeight
  
# 距離上級定位高度
tag.offsetTop
  
# 父定位標籤
tag.offsetParent
  
# 滾動高度
tag.scrollTop
 
'''
    clientHeight -> 可見區域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可見區域：height + padding + border
    offsetTop    -> 上級定位標籤的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滾動高度
    特別的：
        document.documentElement代指文檔根節點
'''

事件

this標籤指向當前正在操做的標籤，event封裝了當前事件的內容。node

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 600px;margin: 0 auto;">
        <input id="i1" onfocus="Focus()" onblur="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>

鼠標失去、得到焦點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="300px">
        <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>
        var myTrs=document.getElementsByTagName('tr');
        for(var i=0; i < myTrs.length; i++){
            myTrs[i].onmousemove = function(){
                this.style.backgroundColor='red';
            }
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor=""
            }
        }
    </script>
</body>
</html>