深入JavaScript之DOM應用
這次帶給大家深入JavaScript之DOM應用，使用JavaScript之DOM應用的注意事項有哪些，以下就是實戰案例，一起來看一下。
什麼是DOM :
document ,節點! 其實說的都是一個東西, CSS時管叫標籤, JS時管叫元素,DOM時,管叫節點;
#瀏覽器支援情況
IE:10% Chrome:60% FF:99% 支援
DOM節點
childNodes:子節點
nodeType:節點的類型
nodeType == 3 -> 文字節點
nodeType == 1 -> 元素節點
childNodes 和nodeType配合使用
<head> <meta charset="UTF-8">
<title>01-DOM基础</title>
<script>
window.onload = function () { // ul的子节点为li
var oUl = document.getElementById('ul1'); for(var i=0;i<oUl.childNodes.length;i++){ //由于在不同的浏览器下,获取到的oUl.childNodes是不一样的;IE6-8会将文本节点也算进去;
//故若想给元素节点修改样式,可以通过 oUl.childNodes[i].nodeType == 1 来获取元素节点,并修改样式;
//nodeType==3 -> 文本节点
//nodeType==1 -> 元素节点
//给所有的li设置背景颜色
if(oUl.childNodes[i].nodeType == 1){
oUl.childNodes[i].style.background = 'red';
}
}
} </script></head><body><ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>abcdefg //文本节点<span>abcdefg</span> //元素节点</body></html>取得子節點
children:他只包括元素,不包含文本,兼容所有瀏覽器
故上面的例子可以這樣寫,簡單粗暴!!!
for (var i=0;i<oUl.children.length;i++){
oUl.children[i].style.background = 'red';
}parentNode:父節點
例子：點擊鏈接，隱藏整個li
parentNode範例:
<html lang="en"><head>
<meta charset="UTF-8">
<title>02-parentNode</title>
<script>
window.onload = function () { var aA = document.getElementsByTagName('a'); for(var i=0;i<aA.length;i++){
aA[i].onclick = function () { this.parentNode.style.display = 'none';
}
}
} </script></head><body><ul>
<li>11111<a href="javaScript:;">隐藏</a></li>
<li>22222<a href="javaScript:;">隐藏</a></li>
<li>33333<a href="javaScript:;">隐藏</a></li>
<li>44444<a href="javaScript:;">隐藏</a></li></ul></body></html>offsetParent
範例：取得元素在頁面上的實際位置
主要用作定位時,取得元素的實際父節點.
#範例一:給第二個div2設定絕對定位,給div2的父節點div1什麼也不設定,那麼div2的offsetParent為body.
<html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style> #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;} #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;} </style> <script> window.onload = function () { oDiv2 = document.getElementById('div2'); alert(oDiv2.offsetParent); //结果:[object HTMLBodyElement] 父节点为body; } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>範例二:給第二個div2設定絕對定位,給div2的父節點div1設定相對定位,那麼div2的offsetParent為div1.
<html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style> #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px; position: relative;} #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;} </style> <script> window.onload = function () { oDiv2 = document.getElementById('div2'); alert(oDiv2.offsetParent); //结果:[object HTMLDivElement] 父节点为div; } </script> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>2.DOM節點(2)
首尾子節點
有相容性問題
firstChild、firstElementChild lastChild 、lastElementChild //IE6-8 //oUl.firstChild.style.background='red'; //高级浏览器 //oUl.firstElementChild.style.background='red';
<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oUl=document.getElementById('ul1'); //IE6-8
//oUl.firstChild.style.background='red';
//高级浏览器
//oUl.firstElementChild.style.background='red';
//给第一个li设置红色背景:由于兼容问题,故需判断下
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
} else
{
oUl.firstChild.style.background='red';
}
};</script></head><body><ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li></ul></body></html>兄弟節點(使用同上)
有相容性問題
nextSibling、 nextElementSibling
previousSibling、previousElementSibling
#3.操縱元素屬性
元素屬性操作
第一種：oDiv.style.display=' block';
第二種：oDiv.style['display']='block';
第三種：Dom方式: oDiv2.setAttribute('display','none');
DOM方式操作元素屬性
取得：getAttribute(名稱)
設定：setAttribute(名稱, 值)
刪除：removeAttribute(名稱)
#4.用className選擇元素
如何用className選擇元素
選出所有元素
透過className條件篩選
初級用法
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++)
{ if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}; </script></head><body><ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li></ul></body></html>封裝成函數
進階用法
<script>
//封装成函数
function getByClass(oParent, sClass) { var aResult=[]; var aEle=oParent.getElementsByTagName('*');//*通配符,获取oParent下面所有的节点
for(var i=0;i<aEle.length;i++)
{ if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
} return aResult;
} window.onload=function () { var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl, 'box'); for(var i=0;i<aBox.length;i++)
{
aBox[i].style.background='red';
}
}; </script>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul></body>5.建立、插入和刪除元素
建立DOM元素
createElement(標籤名) 建立一個節點appendChild(節點) 追加一個節點
#注意:appendChild (節點) 有兩個作用:
(一)如果這個元素是透過createElement(標籤名)創建出來的,那麼它可以直接添加到新的父級;
(二).如果這個元素有父級, 那麼1.先把元素從原有父級上刪除;2.再添加到新的父級.
例子：為ul插入li
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1');
oBtn.onclick=function () { //创建节点
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value; //添加节点 父级.appendChild(子节点);
oUl.appendChild(oLi);
};
}; </script></head><body><input id="txt1" type="text"/><input id="btn1" type="button" value="创建li"/><ul id="ul1"></ul></body></html>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是深入JavaScript之DOM應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
如何在iPhone中撤銷從主畫面中刪除
Apr 17, 2024 pm 07:37 PM
從主畫面中刪除了重要內容並試圖將其取回？您可以透過多種方式將應用程式圖示放回螢幕。我們已經討論了您可以遵循的所有方法，並將應用程式圖示放回主畫面如何在iPhone中撤消從主畫面中刪除正如我們之前提到的，有幾種方法可以在iPhone上恢復此變更。方法1–替換應用程式庫中的應用程式圖示您可以直接從應用程式庫將應用程式圖示放置在主畫面上。步驟1–橫向滑動以尋找應用程式庫中的所有應用程式。步驟2–找到您先前刪除的應用程式圖示。步驟3–只需將應用程式圖示從主庫拖曳到主畫面上的正確位置即可。這是將應用程式圖
PHP中箭頭符號的作用及實作應用
Mar 22, 2024 am 11:30 AM
PHP中箭頭符號的作用及實踐應用在PHP中，箭頭符號（->）通常用於存取物件的屬性和方法。物件是PHP中物件導向程式設計（OOP）的基本概念之一，在實際開發中，箭頭符號在操作物件時發揮重要作用。本文將介紹箭頭符號的作用以及實踐應用，並提供具體的程式碼範例來幫助讀者更好地理解。一、箭頭符號的作用存取物件的屬性箭頭符號可以用來存取物件的屬性。當我們實例化一個對
從入門到精通：探索Linux tee命令的各種應用場景
Mar 20, 2024 am 10:00 AM
Linuxtee命令是一個非常有用的命令列工具，它可以在不影響已有輸出的情況下，將輸出寫入檔案或將輸出送到另一個命令。在本文中，我們將深入探索Linuxtee命令的各種應用場景，從入門到精通。 1.基本用法首先，我們來看看tee指令的基本用法。 tee指令的語法如下：tee[OPTION]...[FILE]...該指令會從標準輸入讀取數據，並將數據
js和vue的關係
Mar 11, 2024 pm 05:21 PM
js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。
探索Go語言的優勢及應用場景
Mar 27, 2024 pm 03:48 PM
Go語言是一種由Google開發的開源程式語言，於2007年首次發布。它被設計成一種簡單易學、高效、並發性強的語言，受到越來越多開發者的青睞。本文將探討Go語言的優勢，並介紹一些適合Go語言的應用場景，同時給出具體的程式碼範例。優勢並發性強：Go語言內建支援輕量級執行緒－goroutine，能夠輕鬆實現並發程式設計。透過使用go關鍵字就可以啟動goroutin
Linux在雲端運算領域的廣泛應用
Mar 20, 2024 pm 04:51 PM
Linux在雲端運算領域的廣泛應用隨著雲端運算技術的不斷發展和普及，Linux作為一種開源作業系統在雲端運算領域中發揮重要作用。由於其穩定性、安全性和靈活性，Linux系統被廣泛應用於各種雲端運算平台和服務中，為雲端運算技術的發展提供了堅實的基礎。本文將介紹Linux在雲端運算領域的廣泛應用，並給出具體的程式碼範例。一、Linux在雲端運算平台中的應用虛擬化技術虛擬化技術
理解MySQL時間戳記：功能、特性與應用場景
Mar 15, 2024 pm 04:36 PM
MySQL時間戳記是十分重要的資料類型，它可以儲存日期、時間或日期加時間。在實際的開發過程中，合理地使用時間戳記可以提高資料庫操作的效率，並且方便進行時間相關的查詢和計算。本文將從MySQL時間戳記的功能、功能和應用場景等面向展開探討，並結合具體的程式碼範例來講解。一、MySQL時間戳記的功能與特性MySQL中有兩種類型的時間戳，一種是TIMESTAMP
