JavaScript快速入門-DOM對象

時間 2019-12-11

標籤 javascript 快速入門 dom 對象欄目 JavaScript 简体版

原文原文鏈接

1、概述

一、什麼是 DOM？

DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準：javascript

"W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"html

W3C DOM 標準被分爲 3 個不一樣的部分：java

核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

什麼是 XML DOM？－>XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。
什麼是 HTML DOM？－>HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。

二、DOM樹

根據 W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點(NODE)：node

整個文檔是一個文檔節點(document對象)
每一個 HTML 元素是元素節點(element 對象)
HTML 元素內的文本是文本節點(text對象)
每一個 HTML 屬性是屬性節點(attribute對象)
註釋是註釋節點(comment對象)

三、節點屬性（自身屬性和導航屬性）

節點(自身)屬性:自己具備的屬性。瀏覽器

attributes - 節點（元素）的屬性節點
nodeType – 節點類型,nodeType 是隻讀的。
nodeValue – 節點值
nodeName – 節點名稱
innerHTML - 節點（元素）的文本值

導航屬性:操做節點的屬性。app

parentNode - 節點（元素）的父節點 (推薦)
firstChild – 節點下第一個子元素
lastChild – 節點下最後一個子元素
childNodes - 節點（元素）的子節點

四、nodeName、nodeType、nodeValue

(一)nodeName 屬性含有某個節點的名稱。函數

元素節點的 nodeName 是標籤名稱ui

屬性節點的 nodeName 是屬性名稱this

文本節點的 nodeName 永遠是 #textspa

文檔節點的 nodeName 永遠是 #document

註釋：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的

(二)nodeValue

對於文本節點，nodeValue 屬性包含文本。

對於屬性節點，nodeValue 屬性包含屬性值。

nodeValue 屬性對於文檔節點和元素節點是不可用的。

(三)nodeType

nodeType 屬性可返回節點的類型。

最重要的節點類型是：

元素類型節點類型

元素element 1

屬性attr 2

文本text 3

註釋comments 8

文檔document 9

五、被忽略的文本

咱們先看一個例子：

<!DOCTYPE html>
<html lang="UTF8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <p>hello world！</p>
</div>
</body>

<script>
    var div=document.getElementById("div2");
    console.log(div.nextSibling.nodeName); //結果會是神馬？？
</script>

</html>

上面的例子，咋看會輸出p節點，可是，結果偏偏不是！

六、推薦的導航屬性

parentElement // 父節點標籤元素，經過父節點再找其餘節點 children // 全部子標籤，一次獲取全部子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素

七、節點之間的關係

父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。

父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱爲根（root）節點
每一個節點都有父節點、除了root節點（它沒有父節點）
一個節點可擁有任意數量的子節點（child-node）
同胞是擁有相同父節點的節點（sibling-node）

八、Node訪問

經過使用 getElementById() 方法【id】

經過使用 getElementsByName() 方法【name】

經過使用 getElementsByTagName() 方法 --支持局部查找【標籤名】
經過使用 getElementsByClassName() 方法 --支持局部查找【類名】

九、Node操做

修改 HTML DOM 意味着許多不一樣的方面：

改變 HTML 內容
改變 CSS 樣式
改變 HTML 屬性
建立新的 HTML 元素
刪除已有的 HTML 元素
替換已有的HTML元素
使用事件
關於class的操做

a、改變HTML內容（innerHTML）

　　document.getElementById("p1").innerHTML="New text!";

b、改變CSS樣式

　　<p id="p2">Hello world!</p>

　　document.getElementById( "p2" ).style.color= "blue" ;

<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
 
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

c、改變HTML屬性

d、建立新的HTML元素

e、刪除已有的HTML元素

注意：

可否在不引用父元素的狀況下刪除某個元素？
很抱歉。DOM 須要瞭解您須要刪除的元素，以及它的父元素。

經常使用刪除元素方法：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

f、替換HTM元素

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
 
<script>
var parent=document.getElementById("div1");  #獲取父級元素
var child=document.getElementById("p1");   #獲取子元素
var para=document.createElement("p");   #建立p標籤
var node=document.createTextNode("這是一個新的段落。"); #給p標籤添加內容<p>這是一個新的段落。</p>
para.appendChild(node);  #把內容放入p裏面
parent.replaceChild(para,child);  #父元素添加子節點
</script>

g、使用事件

<input type="button" onclick="document.body.style.backgroundColor='lavender';" value="修改背景顏色">

h、class的操做

elementNode.className
elementNode.classList.add
elementNode.classList.remove

十、Node事件

HTML DOM 容許 JavaScript 對 HTML 事件做出反應。
經常使用的事件：

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               //練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect      文本被選中。
onsubmit      確認按鈕被點擊。

實例：

一、鼠標點擊(onclick)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>小白教程</title>
</head>
<body>

<h1 onclick="this.innerHTML='hello guy!'">點擊文本!</h1>

</body>
</html>

二、鼠標雙擊（ondbclick）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>小白教程</title>
</head>
<body>

<button ondblclick="db(this)">雙擊我，改變你的人生</button>

</body>
<script>

function db(arg){

	arg.innerHTML='hello world！';
}

</script>
</html>

　　注意：onclick後面能夠直接寫函數的內容，也能夠直接調用函數。

三、鼠標聚焦（onfocus）

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>

請輸入內容：<input type="text" onfocus="myFunction(this)">

<p>當輸入內容得到焦點時，會觸發顏色背景爲黃色。</p>

</body>
</html>

結果爲：

四、按鍵改變（onmousedown和onmouseup）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--開始爲藍色，按下爲黃色，鬆開爲紅色-->
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:blue;width:150px;height:20px;padding:40px;">鼠標按鍵準備按下</div>

<script>
function mDown(obj)
{
	obj.style.backgroundColor="yellow";
	obj.innerHTML="鼠標按鍵已按下"
}

function mUp(obj)
{
	obj.style.backgroundColor="red";
	obj.innerHTML="此時鼠標已鬆開"
}
</script>

</body>
</html>

五、鼠標改變（onmouseover和onmouseout）

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠標移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="謝謝"
}

function mOut(obj)
{
obj.innerHTML="把鼠標移到上面"
}
</script>

</body>
</html>

六、文本選中（onselect）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>小白教程</title>
</head>
<body>

<input type="text" value="Hello world!"  onselect="alert('You have selected some of the text.')" />

</body>

</html>

七、改變（onchange）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	
	if (isNaN(x.value)){
		x.value=x.value.toUpperCase();
	}else{
		alert('請輸入字母！');
	}
	
}
</script>
</head>
<body>

輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框後，函數將被觸發，將小寫字母轉爲大寫字母。</p>

</body>
</html>

八、確認按鈕被點擊

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>小白教程</title>
</head>
<body>

<form id="form"  >
            <input type="text"/>
            <input type="submit" value="點我!" />
</form>

<script type="text/javascript">
            //阻止表單提交方式1().
            //onsubmit 命名的事件函數,能夠接受返回值. 其中返回false表示攔截表單提交.其餘爲放行.

            var ele=document.getElementById("form");
            ele.onsubmit=function(event) {
              // alert("驗證失敗 表單不會提交!");
              // return false;
                
            // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動做。
             alert("驗證失敗 表單不會提交!");
             event.preventDefault();

    }

</body>

</html>

相關標籤/搜索

每日一句

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