詳細な JavaScript DOM アプリケーション-jsチュートリアル-php.cn

詳細な JavaScript DOM アプリケーション

php中世界最好的语言

リリース： 2018-03-13 13:29:34

オリジナル

1417 人が閲覧しました

今回は、JavaScript DOM アプリケーションについて詳しくご紹介します。 JavaScript DOM アプリケーションを使用する際の注意事項について、実際の事例を見てみましょう。

DOM とは:
ドキュメント、ノード!実際、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

例: ページ上の要素の実際の位置を取得します

主に位置決めに使用され、要素の実際の親ノード。

例 1: 2 番目の div2 Positioning に

absolute を設定し、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>

ログイン後にコピー

例 2: に絶対位置を設定します。 2 番目の 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;;

ログイン後にコピー

使用例

rreee -Siblingノード（上記と同じように） style.display='block'; 2 番目のタイプ: oDiv.style['display']=' block'; 3 番目のメソッド: Dom メソッド: oDiv2.setAttribute('display','none');

DOM メソッド要素の属性を操作する

Get: getAttribute(name)

Set: setAttribute(name, value)

Delete:removeAttribute(name)

4. className を使用して要素を選択する

className を使用して要素を選択する方法

すべての要素を選択する

className条件でフィルタリング基本的な使い方

<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>

ログイン後にコピー

関数にカプセル化
高度な使い方

<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>

ログイン後にコピー

5.要素の作成、挿入、削除

DOM要素の作成
createElement(タグ名) ノードの作成appendChild(node)ノードの追加

注: appendChild(node) には 2 つの関数があります:

(1) この要素が createElement( タグ名) に渡される場合、この要素に親がある場合は、新しい親に直接追加できます。 , 次に、 1. まず元の親から要素を削除します; 2. 新しい親に追加します親.

例: ul

   <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>

ログイン後にコピー

にliを挿入します

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

JavaScriptの基本的な応用を深く理解する

JSで注意すべき8つの基礎知識

以上が詳細な JavaScript DOM アプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。