2. 程式人生 > >JavaScript 操作Dom對象

JavaScript 操作Dom對象

阿新 • • 發佈：2018-04-02
替換 樹狀結構 key 上一個 語言 ons ron 通用 scrolltop

1）JavaScript 操作DOM對象

1.DOM：是Document Object Model 的縮寫，及文檔對象模型

2.DOM通常分為三類：DOM Core（核心）、HTML-DOM 和 CSS-DOM

1.DOM Core

DOM Core 不是JavaScript的專屬品，任何一種支持DOM的編輯器語言都可以使用它

它的用途不僅限於處理一種使用標記語言編寫出來的文檔如HTML文檔

getElementById()/getElementByTagName()等方法都是 DOM Core的組成部分

栗子：使用Document.getElementByTagname("input")可獲取頁面中的<input>元素

2.HTML-DOM

獲取DOM模型中的某些對象、屬性、既可以使用DOM-Core實現，也可以使用HTML-DOM實現

相對於DOM Core獲取對象、屬性而言，當使用HTML-DOM時，代碼通常較為簡單，只是它

的應用範圍沒有DOM Core廣泛，僅適用於處理HTML文檔

3.CSS-DOM

CSS-DOM是針對CSS的操作，在JavaScript中，CSS-DOM技術的主要作用是獲取和設置Style

對象的各種屬性，即CSS屬性，通過改變style對象的各種屬性，可以使用網頁呈現出各種

不同的效果。

2.節點和節點關系

簡介：DOM是以樹狀結構組織的HTML文檔，根據DOM概念，我們可以知道， HTML文檔中每個標簽

或元素都是一個節點，在DOM中是這樣規定的

2-1：整個文檔是一個文檔節點

2-2：每個HTML標簽是一個元素節點

2-3：包含在HTML元素中的文本是文本節點

2-4: 每個HTML屬性是一個屬性節點

2-5：註釋屬於註釋節點

[javascript] view plain copy
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>DOM 節點</title>
  6. </head>
  7. <body>
  8. <img src="#" alt="水果" id="fruit">
  9. <h1>喜歡水果</h1>
  10. <p>DOM 應用</p>
  11. </body>
  12. </html>

關系圖........

技術分享圖片

2-6使：用父（parent）、子（child）和同胞（sibing）等術語來描述這些節點的層次關系，父節點擁有節點，

同級的子節點被稱為同胞或兄弟節點，關系如下：

@在樹狀中，頂部節點被稱為根（root），如<html>節點。

@每個節點都有父節點，除了根（他沒有父節點）如<head>和<body>的父節點 都是<html>,

文本 節點DOM應用的父節點是<p>節點。

@一個節點可以擁有任意數量的子節點，如<body>節點的子節點有<img>、<h1>和<p>

@同胞節點是擁有相同父節點的節點、如<img>、<h1>和<p>就是兄弟節點、他們的父節點均

為 <body>

3.訪問節點

使用DOM Core訪問HTML文檔的節點主要有兩種方式，一種是使用getElement系列方法訪問節點、另外一

種是根據節點的層次關系訪問節點。

3-1：使用getElement系列方法訪問指定節點getElementById

1.getElementById()返回按id屬性查找的第一個對象對象的引用

2.getElementByName()返回按帶有指定名稱name查找的對象集合

3.getElementByTagName()返回帶有指定標簽 TagName查找的對象的集合

3-2:根據層次關系訪問節點

通過getEleMent三種方法都會忽略文檔的結構，因此在HTML DOM中提供了一些節點屬性如下

節點屬性：

1.parentNodes 返回節點的父節點

2.childNods 返回子節點集合，childNods[i]

3.firstChild 返回節點的第一個子節點，最普遍的用法是訪問該元素的文本節點

4.lastChild 返回節點的最後一個子節點

5.nextSibling 下一個節點

6.prebiousSiling 上一個節點

來一個栗子嘗嘗：

[javascript] view plain copy
  1. <body>
  2. <section id="news">
  3. <header>京東快報<a href="">更多</a></header>
  4. <ul>
  5. <li><a href="">我是測試A</a> </li>
  6. <li><a href="">我是測試B</a> </li>
  7. <li><a href="">我是測試C</a> </li>
  8. <li><a href="">我是測試D</a> </li>
  9. <li><a href="">我是測試E</a> </li>
  10. </ul>
  11. </section>
  12. /*
  13. section 的子節點（childNodes）是header 和 ul
  14. header 和 ul 的父節點是section（parentNode）,
  15. header 是 section的第一個子節點（firstChild）
  16. ul是section節點的最後一個子節點（lastChild）
  17. 後面省略....請自行思考
  18. */
  19. </body>


要是訪問第三個li節點，該怎麽做那？不妨再吃個栗子

第一種做法：

var obj = document.getElementById("news");

var xx=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;

alert(xx);

運行結果：<li><a href="">我是測試C</a> </li>

要是在第一個li標簽打一個回車，相當於一個空行，則運行結果有變化?

運行結果：<li><a href="">我是測試B</a> </li>

解析：瀏覽器把空行也當做了標簽，這就是瀏覽器的不兼容問題

避免上述現象應該怎麽辦那？

在JavaScript中給大家提供了一組可兼容不同瀏覽器的element屬性，可以消除空行

firstElementChild 返回節點的第一個子節點，最普遍的用法是訪問

lastElementChild 返回節點的最後一個節點

nextElementSibling 下一個節點

previousElementSibling 上一個節點

var obj = document.getElementById("news");

var xx=obj.lastElementChild.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;

alert(xx);

註意事項：

在IE下支持 firstChild lastChild previousSibing nextSibling,但是在FireFox 下由於它會把標簽之間

的空格、換行等當成文本節點，因為為了準確地找到相應的元素，使用firsElementChild

、lastElementChild 、previousElementSibling、nextElementSibling 來兼容瀏覽器

2）節點信息

節點是DOM層次結構中的任何類型的對象的通用名稱，每個節點都擁有包含著關於節點某些信息的屬性，

這些屬性如下：

nodeName （節點名稱）

nodeValue （節點值）

nodeType （節點類型）

1. nodeName 屬性包含某個節點名稱，元素節點的nodeName 是標簽名稱，文本節點的nodeName永遠是#text

文檔節點的nodeName 永遠是#document。

2. nodeValue 節點值，對於節點，nodeValue 屬性包含文本；對於屬性節點，nodeValue屬性包含屬性值，nodevalue

屬性對於文本節點，和元素節點是不可用的

3.nodeType 屬性可返回節點的類型，是一個只讀屬性，如返回的是元素節點、文本節點、註釋節點。

節點類型：

節點類型 NodeType值

元素element 1

屬性attr 2

文本text 3

註釋comments 8

文本document 9

來一個栗子：

[javascript] view plain copy
  1. <body>
  2. <ul id="nodelist">
  3. <li>nodeName</li>
  4. <li>nodeValue</li>
  5. <li>nodeType</li>
  6. </ul>
  7. <script>
  8. //拿到根節點
  9. var nodes=document.getElementById("nodelist");
  10. //拿到根節點下的第一個子節點的類型
  11. var type1=nodes.firstElementChild.nodeType;
  12. //拿到拿到根節點下的第一個子節點的子節點的類型值
  13. var type2=nodes.firstElementChild.firstChild.nodeType;
  14. // \\ var type2=nodes.firstElementChild.childNodes[0].nodeType;
  15. //拿到拿到根節點下的第一個子節點的子節點的類型名稱
  16. var name1=nodes.firstElementChild.firstChild.nodeName;
  17. //拿到拿到根節點下的第一個子節點的子節點的文本值
  18. var str=nodes.firstElementChild.firstChild.nodeName;
  19. alert("type1:"+type1+"\n"+"type2:"+type2+"\n"+"name1:"+name1+"\n"+"str:"+str);
  20. </script>
  21. </body>

運行結果：

技術分享圖片

技術分享圖片

3）操作節點

1.操作節點屬性

語法： getAttribute（“屬性名”）；

setAttribute（“屬性名”，“屬性值”）；

小栗子：

[javascript] view plain copy
  1. <body>
  2. <p>選擇你喜歡的書：<input type="radio" name="book" onclick="book()">我和狗狗一起活下來<input type="radio" name="book" onclick="book()">林允兒 </p>
  3. <div>
  4. <img src="" alt="" id="image" onclick="ing()">
  5. <span></span>
  6. </div>
  7. <script>
  8. function book()
  9. {
  10. //拿到book節點的集合
  11. var ele=document.getElementsByName("book");
  12. //拿到圖片元素
  13. var img=document.getElementById("image");
  14. //判斷選中的是第幾個按鈕
  15. if(ele[0].checked){
  16. img.setAttribute("src","img//dog.jpg");
  17. img.setAttribute("alt","我和狗狗一起活下來");
  18. img.nextElementSibling.innerHTML="我和狗狗一起活下來";
  19. }else if(ele[1].checked)
  20. {
  21. img.setAttribute("src","img//xxx.jpg");
  22. img.setAttribute("alt","林允兒");
  23. img.nextElementSibling.innerHTML="林允兒";
  24. }
  25. }
  26. //用來測試是否修改值成功,點擊圖片測試
  27. function ing()
  28. {
  29. //拿到圖片元素
  30. var img=document.getElementById("image");
  31. alert(img.getAttribute("alt"));
  32. }
  33. </script>
  34. </body>

運行結果：

技術分享圖片

2.創建和插入節點

名稱 描述

createElement（tagName） 創建一個標簽名為tagName的新元素節點

A.appendChild(B) 把B節點追加至A節點的末尾

insertBefore(A,B) 把A節點插入到B節點之前

cloneNode(deep) 復制某個指定的節點

小栗子：

[javascript] view plain copy
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>操作節點</title>
  6. </head>
  7. <body>
  8. <p>選擇你喜歡的書：<input type="radio" name="book" onclick="book()">我和狗狗一起活下來<input type="radio" name="book" onclick="book()">林允兒 </p>
  9. <div></div>
  10. <script>
  11. function book() {
  12. //拿到book節點的集合
  13. var ele = document.getElementsByName("book");
  14. //拿到第一個DIV
  15. var domDiv=document.getElementsByTagName("div")[0];
  16. if(ele[0].checked)
  17. {
  18. var img=document.createElement("img");
  19. img.setAttribute("src","img//ccc.jpg");
  20. img.setAttribute("onclick","cotyNode()")
  21. domDiv.appendChild(img);
  22. }else if(ele[1].checked)
  23. {
  24. var img=document.createElement("img");
  25. img.setAttribute("src","img//xxx.jpg");
  26. img.setAttribute("onclick","cotyNode()")
  27. domDiv.appendChild(img);
  28. }
  29. }
  30. function cotyNode()
  31. {
  32. var domDiv=document.getElementsByTagName("div")[0];
  33. var newDom=domDiv.lastChild.cloneNode(false);
  34. domDiv.insertBefore(newDom,domDiv.firstChild);
  35. }
  36. </script>
  37. </body>
  38. </html>

3.刪除和替換節點

名稱 描述

removeChild( node ) 刪除指定的節點

replaceChild( newNode,oldNode) 屬性attr 用其他的節點替換指定的節點

4.操作節點樣式

style屬性：HTML元素 . style . 樣式屬性 = “值”

document . getElementById("titles").style.color="#00000";

document . getElementById("titles").style.fonSize="25px";

技術分享圖片

技術分享圖片

className屬性：

技術分享圖片

5.獲取元素的樣式

語法一： HTML 元素 . style . 樣式屬性；

示例： alert( document . getElementById（“carList”）. style . display )；

語法一： 只能獲取內聯樣式的屬性值， 無法獲取內部樣式表 或 外部樣式表的屬性值。

語法二：document.defaultView.getComputedStyle( 元素，null ) . 屬性；

示例：var carList = document.getElementById( "carList" );

alert( documen . defaultView.getComputedStyle（carList，null）. dispaly );

語法二：可以實現獲取樣式屬性值

語法三：HTML元素 . currentStyle . 樣式屬性；

alert（document . getElementById（“carList”）. currentStyle . display）;

語法三指兼容 IE 瀏覽器

4）JavaScript 獲取元素位置

技術分享圖片

1）元素屬性應用

document . documentElement . scrollTop；

document . documentElement . scrollLeft；

或者

document . body . scrollTop；

document . body . scrollLeft；

兩者的區別在於：針對於不同的瀏覽器 上述針對 標準瀏覽器使用 下著針對 Chrome

JavaScript 操作Dom對象

相關推薦

JavaScript 操作Dom對象

替換 樹狀結構 key 上一個 語言 ons ron 通用 scrolltop 1）JavaScript 操作DOM對象 1.DOM：是Document Object Model 的縮寫，及文檔對象模型 2.DOM通常分為三類：DOM Core（核心）、HTML-DO

第三章 JavaScript操作Dom對象

lac att 滾動條事件 replace asc 通過 屬性節點 返回 AR 常用的方法： 1.訪問節點: 通過Document.getElementByXXX()獲得一個指定節點-->再通過以下屬性節點訪問節點:第一部分:節點屬性a:parentNode

使用jQuery快速高效制作網頁交互特效——03 第三章 JavaScript操作DOM對象

nth dht rtl font parse classname 編程 stc 當前 1、 DOM：Document Object Model（文檔對象模型）： DOM操作： ●DOM是Document Object M

JavaScript學習——DOM對象

attr text htm win 節點 方法 func function style 1、DOM操作 Document：整個html文件都稱之為一個document文檔 Element：所有的標簽都是Element元素 Attribute：標簽裏面的屬性 Text：標簽

js操作DOM對象

ons 獲取 ont logs nod 愛的 容器 ren gem <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti

js操作DOM對象（節點的增刪改）

pre charset char body creat title 替換 type script <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&

JavaScript之DOM對象的獲取

dom對象 body get 技術分享 返回 效果 技術 java8 bsp 之前我們講過JavaScript之DOM對象獲取的兩篇文章，本文是該系列文章之三，點擊回顧上兩篇文章能更好地理解本文。《JavaScript之DOM對象的獲取（一）》；《JavaScript之DO

JavaScript操作BOM對象

開發 RM 分享圖片 bubuko ack 包裝 AC post 格式 1)windows對象 瀏覽器對象模型（BOM ：Browser Object Model）是JavaScript的組成之一，它提供了獨立於內容與瀏覽 器窗口進行交互的對象，使用瀏覽

javaScript 操作BOM對象

組織 href 系統時間 else語句 art 影響 mar 數學 系列 1)windows對象 瀏覽器對象模型（BOM ：Browser Object Model）是JavaScript的組成之一，它提供了獨立於內容與瀏覽 器窗口進行交互的對象，使用瀏

JQuery 中this和$(this)獲取對象、操作DOM對象的元素屬性

class 獲取對象 clas details 對象 query 操作 active html $(‘.button‘).click(function () { var active = $(‘.buttons-tab a‘).children(‘input‘).at

JavaScript的DOM對象和jQuery對象的對比

會有 解釋 lan doctype red ava 3.1 好的 script <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

JavaScript操作的DOM對象

end ssi title ges log 標準 增加 context tro 什麽叫DOM? DOM是文檔對象模型(Document Object Model，是基於瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標準，每個瀏覽器

Day53：DOM對象（節點關系、查找、操作）

名稱 替換 註意 oot object 創建 parent remove lis 一、DOM對象 1、什麽是HTML DOM HTML Document Object Model（文檔對象模型） HTML DOM 定義了訪問和操作HTML文檔的標準方法

javascript的BOM，DOM對象

ntb inter style sub aid date plain table 我們 BOM對象 window對象 所有瀏覽器都支持 window 對象。概念上講.一個html文檔對應一個window對象.功能上講: 控制瀏覽器窗口的.使用上講: window對象不需要創

前端基礎---JavaScript中的BOM DOM對象

3.1 直接 ons this 新的 表示 們的 添加 ecc 1.BOM對象 window對象 所有瀏覽器都支持 window 對象。概念上講.一個html文檔對應一個window對象.功能上講: 控制瀏覽器窗口的.使用上講: window對象不需要創建對象,直接使用即可

前端之JavaScript：JS之DOM對象一

介紹 close key 屬性 事件傳播 byname logs rst inpu js之DOM對象一 一、什麽是HTML DOM HTML Document Object Model（文檔對象模型） HTML DOM 定義了訪問和操作HTML文檔

7.1.6 DOM對象屬性操作

move ons console tel doc get att ole elements prop() removeProp() $(function(){ 　　//js對input單選按鈕checked的默認設置 　　//console.log($(‘input[

Javascript DOM對象控制HTML

lan href splay ria nbsp XML -s blog ring 首先需要了解什麽是 JavaScript DOM對象以下是一些常用的方法： <!DOCTYPE html><html lang="en"><head>

【JavaScript】DOM—對節點的操作

1、獲得節點 （1）獲得頁面中指定id的節點物件 document.getElementById("id的字串")； （2）獲得頁面中所有標籤名符合要求的標籤 document.getElements

前端之JavaScript：JS之DOM對象三

上下文 splay i++ oca letter 對話 tle 對象 ++ js之DOM對象三 一、JS中for循環遍歷測試 for循環遍歷有兩種 第一種：是有條件的那種，例如 for(var i = 0;i<ele.length;i