初識DOM

時間 2019-12-12

標籤 dom 欄目 HTML 简体版

原文原文鏈接

如何使用JavaScript

script元素

<script>元素

引入方式

內嵌JavaScript代碼

內嵌JavaScript代碼
所謂內嵌JavaScript代碼，與內嵌樣式表的用法類似，就是將JavaScript代碼經過<script>元素直接編寫在HTML頁面的內部。
注意：這種方式致使HTML頁面與JavaScript代碼不分離，不推薦使用。
<form> id = 'myform' action='#'
<input type = 'text' id ='username'value='請輸入你的用戶名'>
</form>
<script>
var username =document.getElementById('username');
console.log(username);
</script>數組

外聯JavaScript文件全部外聯JavaScript文件，相似於外聯樣式表的用法，將JavaScript代碼編寫在獨立的JavaScript文件中，再經過HTML頁面的<script>元素將其JavaScript文件引入。

JavaScript文件內容:
var username =document.getElementById('username');
coonsole.log(username);
HTML頁面內容：
<script>src ='js/index/js'></script>
##引入位置瀏覽器

在<head>元素內部

在<body>元素內部

DOM是什麼

dom是什麼

DOM是個縮寫，全稱是Document Object Model，被譯爲文檔對象模型。
D標識Document，就是DOM將HTML頁面解析爲一個文檔。同時提供了document對象。
O標識Objcet，就是DOM將HTML頁面中每個元素解析爲一個對象。
M 標識Model，就是Dom中表示各個對象之間的關係。動畫

DOM的標準

因爲DOM的標準規範是由W3C組織起草並定義的，因此W3C對DOM的定義是目前最權威的解釋。
DIN是一個獨立於任何語言和平臺的接口，容許任何語言或腳本動態地訪問和更新HTML文檔的內容，結構和樣式。該HTML頁面能夠僅一部處理，而且該處理的結果能夠被合併到所呈現的html頁面中。this

DOM的做用

DOM被設計用於解析HTML頁面文檔，方便JavaScript語言經過DOM訪問和操做HTML頁面中的內容。
DOM是由W3C組織定義標準規範，而且由各大瀏覽器廠商支持。嚴格意義上來將，DOM並不是術語JavaScript語言。
咱們之因此能夠在JavaScript語言中使用DOM，是由於各大瀏覽器將DOM的標準規範內容封裝成了JavaScript語言所支持的形式。
對DOM中的對象，咱們只有調用的權限，沒有修改的權限，也說明了這個問題。prototype

DOM的做用

瀏覽器加載並運行HTML頁面後，會建立DOM結構。因爲DOM中的內容被封裝成了JavaScript語言中的對象，因此咱們可使用
JavaScript語言經過DOM結構來訪問和操做HTML頁面中的內容。設計

DOM樹結構

DOM樹結構

DOM能夠訪問和更新HTML頁面中的內容，結構和樣式，是由於DON將HTML頁面解析爲一個樹結構。
<!DOCTYPE html>
<html lang ='en'>
<head>
<meta charset='UTF-8'>
<title>示例頁面</title>
</head>
<body>
<h2>這是一個示例頁面</h2>
<p id ='p' title = 'this is p.'>這是一個段落內容.</p>
</body>
</html>orm

節點是什麼

節點(Node)本來是網絡術語，表示網絡中的鏈接點。一個網絡是由一些節點構成的集合。
在DOM樹狀結構中，節點也是很中煙的一個概念。簡單的說，節點做爲DOM樹結構中的鏈接點，最終構成了完整的DOM樹結構。

節點之間的關係

DOM中的M表示Model（模型），也能夠用來表示DOM節點樹結構中節點之間的關係；在DOM節點樹結構，主要由如下三層關係：
父級於子級：若是將HTML頁面中摸一個元素做爲父級的話，那包含在該元素內的第一層全部元素均可以稱之爲該元素的子級。
祖先與後代：若是將HTML頁面中的摸一個元素做爲父級的話，那包含在該元素內的全部元素(除了子級元素以外)均可以稱之爲該元素的後代。
兄弟關係：具備相同父級元素的兩個或幾個元素之間的兄弟關係。
DOM訪問和更新HTML頁面中的內容，主要依靠DOM節點樹結構中的以上三種節點關係完成。

Document對象

Document對象是什麼

Document對象是什麼

Document對象是DOM 的標準規範中比較中還要的對象之一。該對象提供了訪問和更新HTML頁面內容的屬性和方法。
Document對象做爲DOM訪問和更新HTML頁面內容的入口。簡單來講，能夠把Documtnt對象理解爲在DOM的變成規範中表明HTML頁面。
Document對象提供了屬性和方法，能夠實現定位HTML頁面中的元素，或者建立新的元素等功能。

繼承鏈關係

Document對象是繼承於Node對象的。Node對象也是DOM的便準規範中很是重要的對象之一，而Node對象又是繼承於EventTarget對象。
console.log(Document.prototype.instanceof Node);
console.log(Node.prototype instanceof EventTarget);
console.log(Document.prototype instanceof EventTarget);
Documen對象的屬性和方法可能是繼承於Ndoe對象和EventTarget對象的。固然，也有一部分屬性和方法是實現了HTMLDocument接口的。

定位頁面元素

定位元素方法方法

Document對象提供了屬性和方法實現了定位頁面元素功能，這也是
DOM的便準規範中的DOcument對象的主要應用之一。
Document對象提供實現定位頁面元素的方法具備以下幾種：
getElementByld()方法：經過頁面元素的id屬性值定位元素。
getElementsByName()方法：經過頁面元素的name屬性值定位元素
getElmentsByTarName()方法：經過頁面元素的元素定位元素。
getElementsByClassName（）方法：經過頁面元素的class屬性值定位元素。
querySelector（）方法：經過CSS選擇器定位第一個匹配的元素。
querySelectorAll（）方法：經過CSS選擇器定位全部匹配的元素

ID屬性值定位元素

HTML頁面元素的id屬性是特色是惟一，不可重複的，全部經過這種方式定位的HTML頁面元素是也是惟一的。
var elemnt= document.getElementById（id）；
注意：若是HTML頁面中不存在具備該id屬性值的元素，則返回null。
var btn = document.getElementById('btn');
//獲取定位元素的class屬性值
var vlassname=btn.className;
//添加animate動畫樣式
classNmane+='antmate'；
//將新的class屬性值設置
btn.className =className；

name屬性值定位元素

其語法格式以下：
var elements =document.getElementsByName(name)；
name是參數，表示索要定位元素的name屬性值，是一個大小寫敏感的字符串。
elements是返回值，表示定位元素的集合，是一個NodeList集合。
var elems = document.getElementsByName('btn');
//循環遍歷全部元素
for (var i=0;i<elems.length;i++){
var elem =elems[i];
var className =elem.className;
classNmae+='animate';
elem.className=className;}

元素名定位元素

其語法格式以下:
var elements =document.getElementsByTagName(name);
name是參數，表示所要定位元素的元素名，符號'*'所表示全部元素。
elements是返回值，表示定位元素的集合，是一個NodeList集合。
var elems =document.getEkementsByTarName（'button）;
//循環遍歷全部元素
for (var i=0; i<elems.length;i++){
var elem =elems[i];
car className+='animate'；
elem.className=className；}

class屬性值定位元素

其語法格式以下：
var elements =document.getElementsByClassName(name)；
name是參數，表示索要定位元素的name屬性值，是一個大小寫敏感的字符串。
elements是返回值，表示定位元素的集合，是一個NodeList集合。
var elems = document.getElementsByClassName('btn');
//循環遍歷全部元素
for (var i=0;i<elems.length;i++){
var elem =elems[i];
var className =elem.className;
classNmae+='animate';
elem.className=className;}

CSS選擇器定位元素

CSS中的選擇器能夠很便利地定位HTML頁面元素，DOM地標準規範中也提供相似地方法。
querySelector（）方法：經過CSS選擇器定位第一個匹配地元素。
var elements =document.querySelector(selectors
);
selectors是參數，表示選擇器，能夠包含一個或多個CSS選擇器，多個則以逗號分隔。
element是返回值，表示定位元素地集合，匹配地第一個元素。、
var btn = document.querySelector(#btn);
//獲取定位元素地class屬性值
var className=btn.className；
//添加animate動畫樣式
className+='animate'；
//將新的class屬性值設置
btn.className=calssName；

querySelectorAll()方法：
經過CSS選擇器定位全部匹配地元素
var elements =document.querySelector(selectors
);
selectors是參數，表示選擇器，能夠包含一個或多個CSS選擇器，多個則以逗號分隔。
element是返回值，表示定位元素地集合，是一個NodeList集合。
var btn = document.querySelectorALL('button');
//獲取定位元素地class屬性值
var className=btn.className；
//添加animate動畫樣式
className+='animate'；
//將新的class屬性值設置
btn.className=calssName；

節點集合NodeList

NodeList是一組元素節點地集合，每個節點具備相應地索引值(從開始地數字，相似於數組)。
NodeList集合分爲兩種：
動態NodeList
所謂動態地NodeList集合，就是若是文檔中地節點樹發生變化，則已經存在地NodeList對象也能夠能會變化。
getElementsByName()方法：經過頁面元素地name屬性值定位元素。
getElementsByTagName（）方法：經過頁面元素地元素名定位元素。
getElemengtsByClassName()方法：經過頁面元素地class屬性值定位元素。
靜態NodeList
所謂靜態NdeList集合，就是對文檔對象模型地任何改動都不會影響集合地內容。
定位頁面元素屬性
Document對象也提供了一些屬性，來定位HTML頁面中地一些比較特殊地元素
documentElemengt：獲取HTML頁面中地<html>元素。
head：獲取HTML頁面中地<head元素>
title:或者HTML頁面中地<title>元素。
links:獲取HTML頁面中地全部元素。body：獲取HTML頁面中的<body>元素。images：獲取HTML頁面中地全部<img>元素。

相關標籤/搜索

每日一句

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