深入JavaScript之DOM應用-js教程-PHP中文網

首頁

web前端

js教程

深入JavaScript之DOM應用

php中世界最好的语言

Mar 13, 2018 pm 01:29 PM

javascriptjs應用

這次帶給大家深入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(&#39;ul1&#39;);            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 = &#39;red&#39;;
                }
            }
        }    </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 = &#39;red&#39;;
}

parentNode:父節點
例子：點擊鏈接，隱藏整個li
parentNode範例:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>02-parentNode</title>
    <script>
        window.onload = function () {            var aA = document.getElementsByTagName(&#39;a&#39;);            for(var i=0;i<aA.length;i++){
                aA[i].onclick = function () {                    this.parentNode.style.display = &#39;none&#39;;
                }
            }
        }    </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(&#39;div2&#39;);             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(&#39;div2&#39;);             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=&#39;red&#39;;    //高级浏览器    //oUl.firstElementChild.style.background=&#39;red&#39;;

使用範例

<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){    var oUl=document.getElementById(&#39;ul1&#39;);    //IE6-8
    //oUl.firstChild.style.background=&#39;red&#39;;
    //高级浏览器
    //oUl.firstElementChild.style.background=&#39;red&#39;;
    //给第一个li设置红色背景:由于兼容问题,故需判断下
    if(oUl.firstElementChild)
    {
        oUl.firstElementChild.style.background=&#39;red&#39;;
    }    else
    {
        oUl.firstChild.style.background=&#39;red&#39;;
    }
};</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(&#39;ul1&#39;);            var aLi=oUl.getElementsByTagName(&#39;li&#39;);            for(var i=0;i<aLi.length;i++)
            {                if(aLi[i].className==&#39;box&#39;)
                {
                    aLi[i].style.background=&#39;red&#39;;
                }
            }
        };    </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(&#39;*&#39;);//*通配符,获取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(&#39;ul1&#39;);            var aBox=getByClass(oUl, &#39;box&#39;);            for(var i=0;i<aBox.length;i++)
            {
                aBox[i].style.background=&#39;red&#39;;
            }
        };    </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(&#39;btn1&#39;);            var oUl=document.getElementById(&#39;ul1&#39;);            var oTxt=document.getElementById(&#39;txt1&#39;);
            oBtn.onclick=function ()            {                //创建节点
                var oLi=document.createElement(&#39;li&#39;);
                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之基礎應用

#JS的8個必須注意的基礎知識

以上是深入JavaScript之DOM應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr