ホームページ >ウェブフロントエンド >htmlチュートリアル >「Java Script DOM プログラミング術」読書メモ -- DOM_html/css_WEB-ITnose

「Java Script DOM プログラミング術」読書メモ -- DOM_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-21 08:51:411522ブラウズ

1. DOM の「D」

「D」はドキュメント (ドキュメント)

2. : DOM の「O」

「O」はオブジェクト (オブジェクト) を表しますオブジェクトの分類

ユーザー定義オブジェクト (ユーザー定義オブジェクト)
ネイティブオブジェクト
ホストオブジェクト

window オブジェクト window オブジェクトはブラウザウィンドウ自体に対応し、通常、このオブジェクトのプロパティとメソッドを総称して BOM (Browse Object Model) と呼ばれます。BOM が提供します。 window.open や window.blur などのメソッド。さまざまなポップアップウィンドウやドロップダウンメニューで悪用されているほどです

3. モデル: DOM の "M"

"M" は "Model" の略です (モデル). DOM はドキュメントを表しますツリーのコード例 (数学的概念)

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>    <body>  </html>代码中<html>相当于树根，即根元素。<head>和<body>属于下一个分支，位于同一层次且互不包含，属于兄弟关系。<head>元素有两个子元素<meta>和<title>(属于兄弟关系)<body>元素有三个子元素<p>、<h1>、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。

ドキュメントのさまざまな要素を家系図として想像できれば、DOM を同じ用語で説明できます。しかし、 「ノードツリー」

と呼ぶ方が正確だと思います。 4. ノード

ノード (node) はネットワーク用語で、ネットワーク内の接続点を表します。ネットワーク。ネットワークはノードの集合です。 DOM にも同じことが当てはまります。ドキュメントはノードのコレクションです。

要素ノード
テキストノード
属性ノード

4.1 要素ノード

DOM のアトムは 要素ノード (要素ノード)

、

、などの要素。タグの名前は要素の名前です。要素には他の要素を含めることもできます。他の要素に含まれない唯一の要素は、ノードツリーのルート要素である 100db36a723c770d327fc0aef2ce13b1 要素です。

4. 2 テキストノード

上の例では、e388a4556c0f65e1904146cc1a846bee というテキストが含まれています。これは テキストノードです。 (テキストノード)。

4.3 属性ノード

属性ノードは、要素のより具体的な説明を提供します。たとえば、ほとんどすべての要素には title 属性があり、この属性を使用して要素に含まれる内容を正確に説明できます。

属性ノード

<p title="a gentle reminder">Don't forget to buy this stuff.<p>

、前の例では、順序なしリスト要素

3 つの関係.png

4, 4 CSS

<link type="text/css" href="file.css" rel="stylesheet">

は、上記のコード

<p class="special">This pargraph has the special class<p><h2 class="special">So dose this headline</h2>

のスタイルシートで定義することも、次のように定義することもできます

special{font-style: italic;}

2)、id 属性 id 属性の目的は、Web ページ内の要素に一意の識別子を追加することです:

h2.special{text-transform: uppercase;}

スタイルシート定義

<ul id="purchases">

#purchases{border:1px solid white;background-color：#333;color：#ccc;padding:1em;}

#purchases li{font-weight:bold;}

要素ノードを取得するには、要素 ID 経由、タグ名経由、クラス名経由の 3 つの DOM メソッドがあります。

getElementsByTagName
getElementsByClassName
1)getElementById

JavaScript の

を続ける必要があります。この 1 対の括弧には、 関数のパラメーターが含まれます。 document.getElementById(id) の getElementById メソッドにはパラメーターが 1 つだけあります: 取得する要素の id 属性の値 この id 属性は一重引用符または二重引用符で囲む必要があります。。この docment.getElementById("purchases") の呼び出しは、オブジェクトを返します。このオブジェクトは、ドキュメントオブジェクトの一意の要素に対応します。その要素の HTLM id 属性値は、purchase です。結果はオブジェクト

          Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         alert(typeof docment.getElementById("purchases"));     </script>    <body>  </html>//利用`typeof`操作符进行验证（typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。</pre> <p> getElementsByTagName メソッドはオブジェクトの配列を返します。各オブジェクトはドキュメント内の指定されたタグを持つ要素に対応します。そのパラメータはタグの名前です: device.getElementByTagName(tag)</p> <h3> </h3> <p>getElementsByTagName では、パラメータとしてワイルドカード文字を使用できます。ワイルドカード文字 (*) は引用符で囲む必要があります </p>。 <pre class="sycode" name="code">alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为：3</pre> <pre class="sycode" name="code"><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         var items=document.getElementByTagName("li");         for (var i=0; i<items.length;i++){         alert(typeof items[i]);         }     </script>    <body>  </html>//代码运行结果显示三个alert对话框，显示的消息都是“object”。</pre> <p>3) getElementByClassName</p> <pre class="sycode" name="code">alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点</pre>このメソッドでは、クラス属性のクラス名を使用して要素にアクセスできます。これはクラス名である 1 つのパラメーターのみを受け入れます。 <pre class="sycode" name="code">var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果，items数组将只包含id属性值是purshase的元素清单的元素</pre> <h3>このメソッドの戻り値も getElementsByTagName に似ており、同じクラス名を持つ要素の配列です。 </h3>   <pre class="sycode" name="code">document.getElementsByClassName("sale")</pre>   <p>利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可</p>   <pre class="sycode" name="code">alert(document.getElementsByClassName("important sale").length);//对话框显示1，表示只有一个元素匹配。类名的顺序不重要，就算元素还带有更多类名也没有关系。</pre>   <p>也可以和getElementById组合使用</p>   <pre class="sycode" name="code">     var shopping=document.getElementById("purchase");     var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。</pre>   <p>getElementByClassName方法非常有用，但只有较新的浏览器才支持它。所以，需要使用已有的DOM方法来实现自己的getElementsByClassName。</p>   <pre class="sycode" name="code">function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i<elems.length;i++){  if(elems[i].ClassName.indexof(classname)!= -1){results[results.length]=elems[i];          }      }return results；    }}</pre>   <h4>5 获取和设置属性</h4>   <ul>       <li>
<strong>getAttribute方法</strong>(获取元素的属性)</li>    <li>
<strong>setAttribute方法</strong>(更改属性节点值)5、1getAttributegetAttribute是一个函数，它只有一个参数(你所要查询的属性的名称)</li>   </ul>   </ul></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="ビューポート単位: vw、vh、vmin、vmax_html/css_WEB-ITnose" href="https://m.php.cn/ja/faq/235368.html">ビューポート単位: vw、vh、vmin、vmax_html/css_WEB-ITnose</a></span><span>次の記事：<a class="dBlack" title="ビューポート単位: vw、vh、vmin、vmax_html/css_WEB-ITnose" href="https://m.php.cn/ja/faq/235376.html">ビューポート単位: vw、vh、vmin、vmax_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script>  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://tongji.php.cn/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '9']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script><!-- End Matomo Code --></html>