HTML5節點操作，HTML節點元素常用的DOM操作

HTML5節點操作，HTML節點元素常用的DOM操作有哪些

OM結構

DOM 采用的是“樹形結構”，用“樹節點”的形式來表示頁面中的每一個元素。我們先看下面的一個例子。

<html>
  <head>
    <title><title>
    <meta charset="utf-8" />
  </head>
	<body>
      <h1>C語言中文網</h1>
			<p>C語言中文網一個……</p>
			<p>C語言中文網成立于……</p>
	</body>
</html>

對于上面這個 HTML 文檔，DOM 將其解析為圖 1 所示的樹形結構。

圖 1：DOM 樹

于HTML文檔被瀏覽器解析后就是一棵DOM樹，要改變HTML的結構，就需要通過JavaScript來操作DOM。

始終記住DOM是一個樹形結構。操作一個DOM節點實際上就是這么幾個操作：

更新：更新該DOM節點的內容，相當于更新了該DOM節點表示的HTML的內容；
遍歷：遍歷該DOM節點下的子節點，以便進行進一步操作；
添加：在該DOM節點下新增一個子節點，相當于動態增加了一個HTML節點；
刪除：將該節點從HTML中刪除，相當于刪掉了該DOM節點的內容以及它包含的所有子節點。

在操作一個DOM節點前，我們需要通過各種方式先拿到這個DOM節點。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS選擇器document.getElementsByClassName()。

由于ID在HTML文檔中是唯一的，所以document.getElementById()可以直接定位唯一的一個DOM節點。document.getElementsByTagName()和document.getElementsByClassName()總是返回一組DOM節點。要精確地選擇DOM，可以先定位父節點，再從父節點開始選擇，以縮小范圍。

例如：

// 返回ID為'test'的節點：
var test=document.getElementById('test');

// 先定位ID為'test-table'的節點，再返回其內部所有tr節點：
var trs=document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID為'test-div'的節點，再返回其內部所有class包含red的節點：
var reds=document.getElementById('test-div').getElementsByClassName('red');

// 獲取節點test下的所有直屬子節點:
var cs=test.children;

// 獲取節點test下第一個、最后一個子節點：
var first=test.firstElementChild;
var last=test.lastElementChild;

第二種方法是使用querySelector()和querySelectorAll()，需要了解selector語法，然后使用條件來獲取節點，更加方便：

// 通過querySelector獲取ID為q1的節點：
var q1=document.querySelector('#q1');

// 通過querySelectorAll獲取q1節點內的符合條件的所有節點：
var ps=q1.querySelectorAll('div.highlighted > p');

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8僅有限支持。

嚴格地講，我們這里的DOM節點是指Element，但是DOM節點實際上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多種，以及根節點Document類型，但是，絕大多數時候我們只關心Element，也就是實際控制頁面結構的Node，其他類型的Node忽略即可。根節點Document已經自動綁定為全局變量document。

練習

如下的HTML結構

<!-- HTML結構 -->
<div id="test-div">
<div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>

請選擇出指定條件的節點：

'use strict';

// 測試:
if (!js || js.innerText !=='JavaScript') {
    alert('選擇JavaScript失敗!');
} else if (!arr || arr.length !==3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !=='Python' || arr[1].innerText !=='Ruby' || arr[2].innerText !=='Swift') {
    console.log('選擇Python,Ruby,Swift失敗!');
} else if (!haskell || haskell.innerText !=='Haskell') {
    console.log('選擇Haskell失敗!');
} else {
    console.log('測試通過!');
}

DOM

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口

它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容

任何 HTML或XML文檔都可以用 DOM表示為一個由節點構成的層級結構

節點分很多類型，每種類型對應著文檔中不同的信息和（或）標記，也都有自己不同的特性、數據和方法，而且與其他類型有某種關系，如下所示：

<html>
    <head>
        <title>Page</title>
    </head>
    <body>
        <p>Hello World!</p >
    </body>
</html>

DOM像原子包含著亞原子微粒那樣，也有很多類型的DOM節點包含著其他類型的節點。接下來我們先看看其中的三種：

<div>
    <p title="title">
        content
    </p >
</div>

上述結構中，div、p就是元素節點，content就是文本節點，title就是屬性節點

操作

日常前端開發，我們都離不開DOM操作

在以前，我們使用Jquery，zepto等庫來操作DOM，之后在vue，Angular，React等框架出現后，我們通過操作數據來控制DOM（絕大多數時候），越來越少的去直接操作DOM

但這并不代表原生操作不重要。相反，DOM操作才能有助于我們理解框架深層的內容

下面就來分析DOM常見的操作，主要分為：

創建節點
查詢節點
更新節點
添加節點
刪除節點

創建節點

// 創建一個html元素，這里以創建h3元素為例
document.createElement("h3")

// 創建一個文本節點；
document.createTextNode(String);

// 創建一個屬性節點，這里以創建class屬性為例
document.createAttribute("class");

createElement

創建新元素，接受一個參數，即要創建元素的標簽名

const divEl=document.createElement("div");

createTextNode

創建一個文本節點

const textEl=document.createTextNode("content");

createDocumentFragment

用來創建一個文檔碎片，它表示一種輕量級的文檔，主要是用來存儲臨時節點，然后把文檔碎片的內容一次性添加到DOM中

const fragment=document.createDocumentFragment();

當請求把一個DocumentFragment 節點插入文檔樹時，插入的不是 DocumentFragment自身，而是它的所有子孫節點

createAttribute

創建屬性節點，可以是自定義屬性

const dataAttribute=document.createAttribute('custom');
consle.log(dataAttribute);

獲取節點

// 通過id號來獲取元素，返回一個元素對象
document.getElementById(idName) 
      
// 通過name屬性獲取id號，返回元素對象數組 
document.getElementsByName(name)  
   
// 通過class來獲取元素，返回元素對象數組
document.getElementsByClassName(className)   

// 通過標簽名獲取元素，返回元素對象數組
document.getElementsByTagName(tagName) 

//不需要兼容IE      
document.querySelector('#idxxx')

document.querySelectorAll('.red')[0]

document.querySelectorAll('#idxxx')[0]

querySelector

傳入任何有效的css 選擇器，即可選中單個 DOM元素（首個）：

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')

如果頁面上沒有指定的元素時，返回 null

querySelectorAll

返回一個包含節點子樹內所有與之相匹配的Element節點列表，如果沒有相匹配的，則返回一個空節點列表

const notLive=document.querySelectorAll("p");

需要注意的是，該方法返回的是一個 NodeList的靜態實例，它是一個靜態的“快照”，而非“實時”的查詢

關于獲取DOM元素的方法還有如下，就不一一述說

document.getElementById('id屬性值');返回擁有指定id的對象的引用
document.getElementsByClassName('class屬性值');返回擁有指定class的對象集合
document.getElementsByTagName('標簽名');返回擁有指定標簽名的對象集合
document.getElementsByName('name屬性值'); 返回擁有指定名稱的對象結合
document/element.querySelector('CSS選擇器');  僅返回第一個匹配的元素
document/element.querySelectorAll('CSS選擇器');   返回所有匹配的元素
document.documentElement;  獲取頁面中的HTML標簽
document.body; 獲取頁面中的BODY標簽
document.all[''];  獲取頁面中的所有元素節點的對象集合型

除此之外，每個DOM元素還有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling屬性，關系圖如下圖所示

更新節點

innerHTML

不但可以修改一個DOM節點的文本內容，還可以直接通過HTML片段修改DOM節點內部的子樹

// 獲取<p id="p">...</p >
var p=document.getElementById('p');
// 設置文本為abc:
p.innerHTML='ABC'; // <p id="p">ABC</p >
// 設置HTML:
p.innerHTML='ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的內部結構已修改

innerText、textContent

自動對字符串進行HTML編碼，保證無法設置任何HTML標簽

// 獲取<p id="p-id">...</p >
var p=document.getElementById('p-id');
// 設置文本:
p.innerText='<script>alert("Hi")</script>';
// HTML被自動編碼，無法設置一個<script>節點:
// <p id="p-id"><script>alert("Hi")</script></p >

兩者的區別在于讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回所有文本

style

DOM節點的style屬性對應所有的CSS，可以直接獲取或設置。遇到-需要轉化為駝峰命名

// 獲取<p id="p-id">...</p >
const p=document.getElementById('p-id');
// 設置CSS:
p.style.color='#ff0000';
p.style.fontSize='20px'; // 駝峰命名
p.style.paddingTop='2em';

添加節點

// 創建一個html元素，這里以創建h3元素為例
document.createElement("h3")

// 創建一個文本節點；
document.createTextNode(String);

// 創建一個屬性節點，這里以創建class屬性為例
document.createAttribute("class");
// 往element內部最后面添加一個節點，參數是節點類型
element.appendChild(Node);

// 在element內部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode);

獲取當前元素的同級元素

// 返回當前元素的下一個同級元素 沒有就返回null
element.nextSibling

// 返回當前元素上一個同級元素 沒有就返回 null
element.previousSibling

獲取當前元素的文本

// 返回元素的所有文本，包括html代碼
element.innerHTML

// 返回當前元素的自身及子代所有文本值，只是文本內容，不包括html代碼
element.innerText

獲取當前節點的節點類型

// 返回節點的類型,數字形式（1-12）
// 常見幾個1：元素節點，2：屬性節點，3：文本節點。
node.nodeType

設置樣式

// 設置元素的樣式時使用style
element.style.color=“#eea”;

innerHTML

如果這個DOM節點是空的，例如，<div></div>，那么，直接使用innerHTML='<span>child</span>'就可以修改DOM節點的內容，相當于添加了新的DOM節點

如果這個DOM節點不是空的，那就不能這么做，因為innerHTML會直接替換掉原來的所有子節點

appendChild

把一個子節點添加到父節點的最后一個子節點

舉個例子

<!-- HTML結構 -->
<p id="js">JavaScript</p >
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
</div>

添加一個p元素

const js=document.getElementById('js')
js.innerHTML="JavaScript"
const list=document.getElementById('list');
list.appendChild(js);

現在HTML結構變成了下面

<!-- HTML結構 -->
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
    <p id="js">JavaScript</p >  <!-- 添加元素 -->
</div>

上述代碼中，我們是獲取DOM元素后再進行添加操作，這個js節點是已經存在當前文檔樹中，因此這個節點首先會從原先的位置刪除，再插入到新的位置

如果動態添加新的節點，則先創建一個新的節點，然后插入到指定的位置

const list=document.getElementById('list'),
const haskell=document.createElement('p');
haskell.id='haskell';
haskell.innerText='Haskell';
list.appendChild(haskell);

insertBefore

把子節點插入到指定的位置，使用方法如下：

parentElement.insertBefore(newElement, referenceElement)

子節點會插入到referenceElement之前

setAttribute

// 括號傳入屬性名，返回對應屬性的屬性值
element.getAttribute(attributeName)

// 傳入屬性名及設置的值
element.setAttribute(attributeName,attributeValue)

在指定元素中添加一個屬性節點，如果元素中已有該屬性改變屬性值

const div=document.getElementById('id')
div.setAttribute('class', 'white');//第一個參數屬性名，第二個參數屬性值。

刪除節點

刪除一個節點，首先要獲得該節點本身以及它的父節點，然后，調用父節點的removeChild把自己刪掉

// 拿到待刪除節點:
const self=document.getElementById('to-be-removed');
// 拿到父節點:
const parent=self.parentElement;
// 刪除:
const removed=parent.removeChild(self);
removed===self; // true

刪除后的節點雖然不在文檔樹中了，但其實它還在內存中，可以隨時再次被添加到別的位置

給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎

用新標簽

header：定義文檔的頁眉頭部
nav：定義導航鏈接的部分
footer：定義文檔或節的頁腳底部
article：定義文章。
section：定義文檔中的節（section、區段）
aside：定義其所處內容之外的內容側邊

新增的input type屬性

類型使用示例含義email輸入郵箱格式tel輸入手機號碼格式url輸入url格式number輸入數字格式search搜索框（體現語義化）range自由拖動滑塊time小時分鐘date年月日datetime時間month月年week星期年

常用新屬性

屬性用法含義placeholder占位符當用戶輸入的時候里面的文字消失刪除所有文字，自動返回autofocus規定當頁面加載時 input 元素應該自動獲得焦點multiple多文件上傳autocomplete規定表單是否應該啟用自動完成功能有2個值，一個是on 一個是off on 代表記錄已經輸入的值 1.autocomplete 首先需要提交按鈕

2.這個表單您必須給他名字required必填項內容不能為空accesskey規定激活（使元素獲得焦點）元素的快捷鍵采用 alt + s的形式

datalist

datalist標簽定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來綁定 datalist。

示例

<body>

</datalist>

</body>

TML5屬于上一代HTML的升級語言，設計HTML5最主要的目的是為了在移動設備上支持多媒體！！！

好處：跨平臺：

例如：比如你開發了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺、Opera的游戲中心、Facebook應用平臺，甚至可以通過封裝的技術發放到App Store或Google Play上，所以它的跨平臺性非常強大，這也是大多數人對HTML5有興趣的主要原因。

缺點：

pc端瀏覽器支持不是特別友好，造成用戶體驗不佳(隨著移動端的發展不斷擴大和win10（ie10）的大量推廣，這一缺點將被無限縮小)

新特性：

1. 取消了過時的顯示效果標記 <font></font> 和 <center></center>等...

2. 新語義標簽的引入

3. 新表單元素引入

4. canvas標簽（圖形設計）

5. 本地數據庫（本地存儲）

6. 一些API

1.HTML5新語義標簽

HTML5新標簽的數量在25個左右具體也沒有找到詳細的資料來查看（每個網站顯示的數量都不一樣）

雖然新增的標簽很多但是實際上用到的應該只有十個左右MDN上有一句話

“HTML 使用“標記”來注明文本、圖片和其他內容，以便于在 Web 瀏覽器中顯示。HTML 標記包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等。”

這其中大部分有HTML5以前的標簽也有HTML5的而這些剛好就是我們常用的標簽，不常用的也許不必太過了解布局DIV也可以不是么？

另外推薦大家在使用新語義標簽的時候盡量每個獨立的頁面只使用一個標簽作為包裹，語義化的作用就是seo（具體可百度），就是讓搜索引擎知道網上到底有些什么，如header 、main、footer標簽等等，當然你也可以寫100個！

以下總結出HTML5常用的標簽： “header” “nav” “main”“article” “address”“section”“aside” “footer”

如果忘記了這些標簽的意思可以訪問 MDN、W3C、或者CSND,當然博客園上搜搜可能會更快。

2.HTML5的重點標簽之video和audio

<video></video> 視頻

屬性：controls 顯示控制欄

屬性：autoplay 自動播放

屬性：loop 設置循環播放

<audio></audio> 音頻

屬性：controls 顯示控制欄

屬性：autoplay 自動播放

屬性：loop 設置循環播放

video標簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp

多媒體標簽在網頁中的兼容效果方式（每個瀏覽器支持的情況不同所以需要做兼容性處理）

（以下source屬性只會生效一個即 if=true 之后就不執行了）

3.HTML5中的智能表單控件

type值=

email: 輸入合法的郵箱地址

url：輸入合法的網址

number：只能輸入數字

range：滑塊

color：拾色器

date：顯示日期

month：顯示月份

week ：顯示第幾周

time：顯示時間

（智能表單，會自動對輸入的內容做基本校驗，內容不符合基本校驗則拒絕提交請求

表單屬性

◆form屬性：

autocomplete=on | off 自動完成

novalidate=true | false 是否關閉校驗

◆ input屬性：

autofocus ：自動獲取焦點

multiple：實現多選效果

placeholder ：占位符（提示信息）

required：必填項

本地存儲

隨著互聯網的快速發展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由于其存儲大小只有4k左右，并且解析也相當的復雜，給開發帶來諸多不便，HTML5規范則提出解決方案，使用sessionStorage和localStorage存儲數據。

localStorage：

1. 永久生效

2. 多窗口共享

3. 容量大約為20M

◆window.localStorage.setItem(key,value) 設置存儲內容

◆window.localStorage.getItem(key) 獲取內容

◆window.localStorage.removeItem(key) 刪除內容

◆window.localStorage.clear() 清空內容

sessionStorage：

1. 生命周期為關閉當前瀏覽器窗口

2. 可以在同一個窗口下訪問

3. 數據大小為5M左右

◆window.sessionStorage.setItem(key,value)

◆window.sessionStorage.getItem(key)

◆window.sessionStorage.removeItem(key)

◆window.sessionStorage.clear()

required如何修改默認提示選項

需要兩個幾個參數

placeholder=默認提示用戶輸入

oninvalid事件=當用戶輸入不符合規則的時候提示的內容隨意改setCustomValidity 就是用來修改 requered值的函數

oninput事件=約等于chuange事件立即執行

4.HTML5中新的一些API

以前獲取節點通過

document.getElementById("ID名稱")這些還有className，name，tagname等等方式獲取返回當前節點

H5新增的節點獲取方法只有兩個

document.querySelector("選擇器")；返回節點

document.querySelectorAll("選擇器"); 返回數組

可以完美的代替以前或者節點的方式，如果無需兼容ie10以下的話

H5中對class的操作

classList.add("類名")

添加class類名不返回任何值如果你把它賦值給一個變量得到結果是undefined

classList.remove("類名"); 刪除

classList.contains("類名");

檢查has className 是否存在返回布爾值即true and false

classList.toggle("active");

查詢active 是否存在，存在就刪除，不存在就添加，省去了if判斷！返回布爾值如果執行多條即 true false true false.

自定義屬性（小案例分析體驗自定義屬性） data-自定義屬性名

1. 獲取自定義屬性 Dom.dataset 返回的是一個對象

Dom.dataset.屬性名或者 Dom.dataset[屬性名]

注：屬性名無需加data如自定義屬性名=data-canvas 那么獲取的時候直接dataset.canvas即可設置同理

2. 設置自定義屬性

Dom.dataset.自定義屬性名=值或者 Dom.dataset[自定義屬性名]=值；

文件讀取 FileReader

FileReader 接口有3個用來讀取文件方法返回結果在result中

readAsBinaryString ---將文件讀取為二進制編碼

readAsText ---將文件讀取為文本

readAsDataURL ---將文件讀取為DataURL

FileReader 提供的事件模型

onabort 中斷時觸發

onerror 出錯時觸發

onload 文件讀取成功完成時觸發

onloadend 讀取完成觸發，無論成功或失敗

onloadstart 讀取開始時觸發

onprogress 讀取中

獲取當前網絡狀態

window.navigator.onLine 返回一個布爾值網沒問題返回true否則返回false

網絡狀態事件（大部分為不支持和廢棄狀態也許移動端用的比較多）

1. window.ononline

2. window.onoffline

獲取地理定位

獲取一次當前位置

window.navigator.geolocation.getCurrentPosition(success,error);

success成功之后獲取位置信息否則拋出錯誤，比如獲取位置信息被拒絕

1. coords.latitude 維度

2. coords.longitude 經度

實時獲取當前位置

window.navigator.geolocation.watchPosition(success,error);

以上內容或有不足，歡迎各位指出補充，謝謝。

在線咨詢

上一篇：web中直接操作DOM為什么慢？
下一篇：JavaScript中各種源碼實現（前端面試筆試必備

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5節點操作，HTML節點元素常用的DOM操作

OM結構

練習

DOM

操作

創建節點

createElement

createTextNode

createDocumentFragment

createAttribute

獲取節點

querySelector

querySelectorAll

更新節點

innerHTML

innerText、textContent

style

添加節點

innerHTML

appendChild

insertBefore

setAttribute

刪除節點

您的項目需求