DOM操做筆記

時間  2019-12-05
標籤 dom 筆記 欄目 HTML 简体版
原文   原文鏈接

1、DOM簡介

一、定義：

DOM 是 JavaScript 操做網頁的接口，全稱爲「文檔對象模型」（Document Object Model）。javascript

二、做用

它的做用是將網頁轉爲一個 JavaScript 對象，從而能夠用腳本進行各類操做（好比增刪內容）。
瀏覽器會根據 DOM 模型，將結構化文檔（好比 HTML 和 XML）解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。全部的節點和最終的樹狀結構，都有規範的對外接口。css

三、節點

DOM 的最小組成單位叫作節點（node）。文檔的樹形結構（DOM 樹），就是由各類不一樣類型的節點組成。
節點的類型有七種。html

  1. Document：整個文檔樹的頂層節點
  2. DocumentType：doctype標籤（好比<!DOCTYPE html>）
  3. Element：網頁的各類HTML元素（好比<body>）
  4. Attribute：網頁元素的屬性（好比class="right"）
  5. Text：標籤之間或標籤包含的文本
  6. Comment：註釋
  7. DocumentFragment：文檔的片斷

在這裏簡單介紹，元素Element的構成：標籤tag，文本content，屬性Attributejava

clipboard.png

clipboard.png

四、節點樹

全部節點造成的樹狀結構就是 DOM 樹
瀏覽器原生提供document節點，document節點表明整個文檔。
文檔的第一層只有一個節點，就是 HTML 網頁的第一個標籤<html>，它構成了樹結構的根節點（root node），其餘 HTML 標籤節點都是它的下級節點node

clipboard.png

2、document 對象

全部屬性見Document 節點git

一、document 對象簡介

每一個載入瀏覽器的HTML文檔都會成爲document對象。只要瀏覽器開始載入 HTML 文檔，該對象就存在了，能夠直接使用。
document對象包含了文檔的基本信息，咱們能夠經過JavaScript對HTML頁面中的全部元素進行訪問、修改。github

二、document 對象屬性

document對象有不少屬性來描述文檔信息，在console臺裏面輸出document.就會出現document所有的屬性。數組

clipboard.png

如下爲經常使用屬性瀏覽器

三、 document.doctype

//<!DOCTYPE html>緩存

四、 document.title

五、 document.characterSet

//"UTF-8"

六、 document.head

七、 document.body

八、 document.readyState屬性

返回當前文檔的狀態，共有三種可能的值
1）. loading：加載HTML代碼階段，還沒有完成解析
2）. interactive：加載外部資源階段
3）. complete：所有加載完成
演示一下，在html放入一章圖片，調卡網絡，刷新網頁查看readystate的狀態
clipboard.png
...]

clipboard.png

九、 document.location

location屬性返回一個只讀對象，返回的是當前文檔的URL信息
clipboard.png

9.2 document.location的應用

// 在控制檯輸入該語句，會直接跳轉到另外一個網址

  • document.location.reload(true)

// 當前頁面會從新加載，並且優先從服務器從新加載

  • document.location.reload(false)

// 當前頁面會從新加載，並且優先從本地緩存從新加載（默認值）

  • document.location.toString()

// 將location對象轉爲字符串，等價於document.location.href

十、document.open()、document.close()

document.open方法用於新建一個文檔，供write方法寫入內容。它實際上等於清除當前文檔流，從新寫入內容

document.close方法用於關閉open方法所新建的文檔。一旦關閉，write方法就沒法寫入內容了。

clipboard.png

十一、document.write()

document.write方法用於向當前文檔寫入內容。
只要當前文檔尚未用close方法關閉，它所寫入的內容就會追加在已有內容的後面。
若是頁面已經渲染完成關閉了，再調用write方法，它會先調用open方法，擦除當前文檔全部內容，而後再寫入
clipboard.png

咱們的頁面渲染的時候就會去打開一個文檔流，當渲染繪製結束，就關閉這個文檔流。
關閉後，若是從新調用document.write()就會從新去打開一個新的文檔流，並寫入數據

3、選中Element的方式

dom的操做，分爲兩步：1是選擇它，2是操做它

一、getElementById()

返回匹配ID屬性的元素節點，若是沒有發現匹配的節點，則返回null

var elem = document.getElementById("test")

二、getElementsByClassName()

返回一個相似數組的對象(HTMLCollection)，包括了全部class名字符合指定條件的元素

clipboard.png
咱們能夠經過下標的方式去訪問它，getElementsByClassName('center')[0]

clipboard.png

三、getElementsByTagName()

返回全部指定標籤的元素

var paras = document.getElementsByTagName("p");

四、getElementsByName()

選擇擁有name屬性的HTML元素，返回一個NodeList格式的對象，不會實時反映元素的變化

<form name="x"></form>
var forms = document.getElementsByName("x");

clipboard.png

五、querySelector() ES5的新寫法

像css同樣選擇元素（id用#，class用. ），只會選擇一個元素，選擇第一個元素。

六、querySelectorAll()

和querySelector()相似，不過querySelectorAll()返回的是知足條件的全部元素，也就是一個NodeList類型的對象

elementList = document.querySelectorAll(selectors)

querySelectorAll方法的參數，能夠是逗號分隔的多個CSS選擇器，返回全部匹配其中一個選擇器的元素

4、建立元素

一、document.createElement(" ") 建立HTML元素節點

參數爲元素的標籤名，即元素節點的tagName屬性。
建立了一個元素，建立的這個元素在虛擬的dom裏面，只有把這個虛擬的dom放在頁面，用戶才能看得見

var newDiv = document.createElement("div")

二、document.createTextNode(" ")建立了一個文本節點

用來生成文本節點，參數爲所要生成的文本節點的內容

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

三、document.createDocumentFragment()建立了一個DocumentFragment對象

var docFragment = document.createDocumentFragment();

DocumentFragment對象是一個存在於內存的DOM片斷，可是不屬於當前文檔，經常用來生成較複雜的DOM結構，而後插入當前文檔。
這樣作的好處：由於DocumentFragment不屬於當前文檔，對它的任何改動，都不會引起網頁的從新渲染，比直接修改當前文檔的DOM有更好的性能表現。
舉個例子解釋
clipboard.png
剛纔的代碼會引發五次從新渲染，咱們生成一個內存片斷，一次就搞定了,並且節省了一個標籤

clipboard.png

var contain= document.querySelector('.classbar')
var fragment=document.createDocumentFragment()
for(var i=0;i<5;i++){
  var content =document.createElement('li')
  var text=document.createTextNode(i)
  content.appendChild(text)
 fragment.appendChild(content)
}
 contain.appendChild(fragment)

5、修改元素

一、appendChild()在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

二、insertBefore()在某個元素以前插入元素

var newdiv= document.createElement('div')
var newcontent= document.createTextNode('hhhhhhhh')
newdiv.insertBefore(newcontent,newdiv.firstChild)

三、replaceChild()把一個元素替換另一個元素

newDiv.replaceChild(newElement, oldElement)有兩個參數：要插入的元素和要替換的元素
舉個例子，源代碼

clipboard.png

當咱們用第一個元素去替換最後一個元素以後

clipboard.png

四、removeChild()刪除某個元素

var date =document.createElement('p')
 var text=document.createTextNode('ffff')
 date.appendChild(text)
 contain.appendChild(date)
 contain.removeChild(date)

五、clone元素

cloneNode()方法用於克隆元素，方法有一個布爾值參數，傳入true的時候會深複製，也就是會複製元素及其子元素（IE還會複製其事件），false的時候只複製元素自己

varnode.cloneNode(true)

6、屬性的操做

一、getAttribute() 用於獲取元素屬性（attribute）的值

node.getAttribute('id');

二、createAttribute() 生成一個新的屬性對象節點（不經常使用）

attribute = document.createAttribute(name);
//createAttribute方法的參數name，是屬性的名稱，好比id。

三、setAttribute()用於設置元素屬性

var node = document.getElementById("div1");
node.setAttribute("id", "newVal");//屬性名 ，屬性值

四、romoveAttribute()用於刪除元素屬性

node.removeAttribute('id');

五、innerText

選擇元素，使用innertext，輸入的字符串會當成文本展現

document.querySelector('.classbar').innerText='<p>123<span>456</span></p>'

clipboard.png

六、innerHTML

選擇元素，使用innerHtml，輸入的字符串會當成html語句執行後展現

document.querySelector('.classbar').innerHTML='<p>123<span>456</span></p>'

clipboard.png
使用時要注意安全的問題，innerHTML內容不能由用戶輸入

7、修改css樣式

一、修改style 屬性

可修改元素的 style 屬性，修改結果直接反映到頁面元素
選中這個元素，使用style對象，就會出現該元素全部的css屬性

clipboard.png
操做dom元素的style屬性

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'

clipboard.png

二、getComputedStyle獲取元素計算後的樣式

經過 node.style.屬性 不能直接獲取dom對象的style的值，必須使用getComputedStyle獲取元素計算後的樣式
clipboard.png
getComputedStyle是widow全局變量，
經過getComputedStyle(document.querySelector(".center"))能夠獲取(".center")這個dom元素全部的css屬性值。
而後經過下標或者.來獲取具體的屬性值，注意能夠用駝峯寫法，來代替—鏈接字符。

clipboard.png
注意getComputedStyle是隻讀的屬性，不能經過該屬性來設置css屬性

三、class 新增/刪除/切換/判斷操做

var nodeBox = document.querySelector('.box')
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //刪除 class
nodeBox.classList.toggle('active')   //新增/刪除切換
node.classList.contains('active')   // 判斷是否擁有 class

舉個栗子

<style>
  .box{
  padding:10px;
  border:1px solid #ccc;
  box-shadow:1px 1px 2px 2px rgba(0,0,0,0.14);
}
.box.active{
  background:#000;
  color:#fff;
}
  </style>
</head>
<body>
<div class="box">
  <h1>hello</h1>
  <p>jirengu</p>
</div>
   <button id="add">add</button>
   <button id="remove">remove</button>
   <button id="toggle1">toggle1</button>
   <button id="toggle2">toggle2</button>
</body>
var toggle1btn=document.querySelector('#toggle1')
var toggle2btn=document.querySelector('#toggle2')
var addbtn=document.querySelector('#add')
var removebtn=document.querySelector('#remove')
var boxpanel=document.querySelector('.box')

addbtn.onclick=function(){boxpanel.classList.add('active')}

removebtn.onclick=function(){boxpanel.classList.remove('active')}

toggle1btn.onclick=function(){
  if(boxpanel.classList.contains('active')){
  boxpanel.classList.remove('active')  
  }else{
    boxpanel.classList.add('active') 
  }
}

toggle2btn.onclick=function(){
  boxpanel.classList.toggle('active')}

結果展現

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程