[ウェブ]確かに知っているだろう - 完全なDOMを使用してプロパティを埋めます

2019ユニコーン企業重く募集エンジニアのPythonの標準>>>

　　この記事では説明動的負荷絵達成するためにDOMを使用する簡単な方法の機能を。

　　上記は、説明します。

　　。1 DOM 4つの一般的な方法

　　まず、結果を見て、最初はフォトアルバムでは、画像間のナビゲーションをクリックして、表示の下に切り替えることができます。

　　家をクリックすると、動的に別の画像に切り替えることができます

　　次のようにコードは、使用されます。

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>我的相册</title>

         <style type="text/css">
            body {
                font-family: "Helvetica","Arial",sans-serif;
                color: #333;
                background-color: #ccc;
                margin: 1em 10%;
            }
            h1 {
                color:#333;
                background-color: transparent;
            }
            a {
                color:#c60;
                background-color: transparent;
                font-weight: bold;
                text-decoration:none;
            }
            li {
                float: left;
                padding: 1em;
                list-style: none;
            }
            img {
                clear:both;
                display: block;
            }
         </style>
    </head>
    <body>
        <h1>我的相册</h1>
        <ul>
            <li>
                <a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>
            </li>
            <li>
                <a href="images/rabit.png" title="I'm rabit!" onclick="showPic(this);return false;">Rabit</a>
            </li>
            <li>
                <a href="images/house.png" title="I'm house!" onclick="showPic(this);return false;">house</a>
            </li>
            <li>
                <a href="images/monkey.png" title="I'm monkey!" onclick="showPic(this);return false;">monkey</a>
            </li>
        </ul>

        <img id="placeHolder" alt="image" src="images/pig.png"/>

        <p id="description">Choose an image.</p>

        <script type="text/javascript">
            function showPic(whichPic){
                var source = whichPic.getAttribute("href");
                var placeHolder = document.getElementById("placeHolder");
                placeHolder.setAttribute("src",source);

                var text = whichPic.getAttribute("title");
                var description = document.getElementById("description");
                description.firstChild.nodeValue = text;
            }
        </script>
    </body>
</html>

　　コード分析

　　このサンプルコードでは、知っている主な必要があります：

　　1要素オブジェクトのプロパティを取得する方法

　　2動的要素のオブジェクト属性値を設定する方法

　　3クリックイベントをインターセプトする方法

　　4ダイナミックテキスト要素を設定する方法

　　5フロートフロート

　　1＆2設定要素オブジェクトのプロパティを取得します。

　　続編は、あなたがのgetAttribute（）メソッドとsetAttribute（）の2つのメソッドを使用することができ、要素のプロパティを設定します、導入されています：

　　showPic（）関数では、オブジェクトを介してあなたが直接コンテンツへのリンクのためのgetAttribute href属性を呼び出すことができ、上を通過した後、getElementByIdを法による画像オブジェクトを取得し、そのsrc属性の値を設定します。

var source = whichPic.getAttribute("href");
var placeHolder = document.getElementById("placeHolder");
placeHolder.setAttribute("src",source);

　　3 onclickイベント

　　上記のように長い着信オブジェクトができるように、showPic（）メソッドが作成されています。そのため、ラベルには、次のことができ、のonclickイベントを使用します。

　　逆にそれがfalseの場合、それはどんな結果が得られないでしょう。しかし、onClickイベントは、それが真実であるならば、それは別のページへのリンクにジャンプするにはデフォルト設定されます、bool値を受信することです。

　　そこで、次のようのonClickイベントの中で書かれた必要があります。

<a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>

　　4セットのテキストの動的

　　テキストオブジェクトの要素を使用したい場合は、のnodeValueそれを使用しています。しかし、直接使用する場合は、null値を取得します。

　　要素オブジェクト自体は、テキストではありませんが、それはのchildNodesオブジェクト、のfirstChildとlastChildオブジェクトを持っているので。

　　見つけることができる彼のchildNodesプロパティを展開し、プロパティは、オブジェクトが含まれています。

　　このオブジェクトはのnodeValueプロパティを持つ、対応するタグは、対応するコンテンツです。

　　由于该标签中只有一个对象，因此使用 firstChild 和 lastChild 或者 childNodes[0] 都可以获取到该对象。

　　其中的原理，类似前面文章讲述的元素节点，属性节点和文本节点的关系，文本节点是该元素标签节点的一个子对象，因此无法用nodeValue直接获取标签的文本，而是需要获取它的孩子对象，才能得到nodeValue。

　　5 float浮动

　　如果不设置img的CSS样式，会发现本来我们想要使ul中的li标签水平显示，结果在宽度足够的情况下，img也跟着水平显示了。

　　这是为什么呢？

　　查阅资料发现，原来传统的文档对象是按照文档布局来显示的：由上到下，由左到右，遇到块级元素则换行，遇到内联元素则补齐。

　　如果使用float浮动，会打破该布局，如果给对象设置上了float属性，则会导致文档布局时，出现一定的空隙，那么这个空隙就会让下一个元素来填充了。

　　因此上面的图片布局中，img元素会随着ul中li的float一起浮动显示。

　　而clear:both则是为了预防float引起的布局错乱，可以使用clear清除布局设置。这样img就不会与前面的li产生同样的float效果了。

　　但是虽然清除了浮动，但由于img元素属于内联元素，因此只要把它转换成块级元素，就可以产生换行的效果了。

            img {
                clear:both;
                display: block;
            }

　　参考

　　【1】float详解：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html

　　【2】《JavaScript DOM 编程艺术》

　　【3】巧用クリア：両方ます。http：//www.cnblogs.com/jenney-qiu/archive/2012/03/28/2421819.html

　　【4】表示します。http：//www.w3school.com.cn/cssref/pr_class_display.asp

　　要素に関連付けられている[5]ブロックレベル要素：HTTP：//www.cnblogs.com/NetSos/archive/2010/08/31/1814223.html

ます。https：//my.oschina.net/u/204616/blog/545474で再現