HTML DOM とは何ですか? HTML DOMの応用説明-jsチュートリアル-php.cn

HTML DOM とは何ですか? HTML DOMの応用説明

不言

リリース： 2018-10-13 17:06:06

転載

2921 人が閲覧しました

この記事の内容は、HTML DOM とは何ですか? HTML DOM のアプリケーションについての説明は、参考になると思います。

DOM とは何ですか?

DOM (Document Object Model) はドキュメントオブジェクトモデルと訳され、HTML および XML ドキュメント用のプログラミングインターフェイスです。
HTML DOM は、HTML ドキュメントにアクセスして操作するための標準メソッドを定義します。
DOM は HTML 文書をツリー構造で表現します。

HTML DOM とは何ですか? HTML DOMの応用説明

HTML DOM は、すべての HTML 要素のオブジェクトとプロパティ、およびそれらにアクセスするメソッドを定義します。

言い換えれば、HTML DOM は、HTML 要素を取得、変更、追加、削除する方法に関する標準です。

HTML DOM 標準によれば、HTML 内のすべてのコンテンツはノードです。

ドキュメント全体はドキュメントノードです
各 HTML 要素は要素ノードです
HTML 要素内のテキストはテキストノードです
各 HTML 属性は属性ノードです
コメントコメントノードです。

HTML DOM の一部のメソッド

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

ログイン後にコピー

HTML DOM の一部の属性

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

ログイン後にコピー

アプリケーション:都市を動的に追加する

要件: Web ページにアクセスしたときに、Web ページにない住所を追加します

nbsp;html>


    <meta>
    <title>动态添加城市</title>
    <script>
        function add_city() {
        // 1. 获取输入框值
        var cityEle= document.getElementById(&#39;city&#39;).value;
        // 2. 创建城市的文本节点
        var citynode = document.createTextNode(cityEle);
        // 3. 创建li的元素节点
        var linode = document.createElement("li");
        // 4. 把城市的文本节点，添加到li元素节点中
        linode.appendChild(citynode);
        // 5. 获取顺序列表ol标签的值
        var ulEle = document.getElementById(&#39;city_line&#39;);
        // 6. 将li元素节点添加到ol标签里
        ulEle.appendChild(linode);
        }
    </script>


    <input>
    // 确定事件类型'onclick'
    <input>

    <ol>
        <li>西安</li>
        <li>拉萨</li>
        <li>成都</li>
    </ol>

ログイン後にコピー

HTML DOM とは何ですか? HTML DOMの応用説明

#アプリケーション: 都市の二次リンケージ

いわゆる二次リンケージドロップダウンリストによる選択では、別の選択ドロップダウンリストに対応するデータが表示されます。たとえば、2 つのドロップダウンリストがあります。最初のリストは、特定の県を選択すると、その県の都市も表示されます。

nbsp;html>


    <meta>
    <title>二级联动（城市）</title>
    <style>
        div{
            margin: 0 auto;
            text-align: center;
            margin-top: 100px;
        }
    </style>
    <script>
        function choice_city() {
            // 2.1 获取用户选择的省份
            var province_Ele  = document.getElementById(&#39;province&#39;).value;
            // 2.2 创建一个二维数组，用来存放省份和城市的对应关系
            var cities = new Array(3);
            cities[0] = new Array(&#39;西安&#39;,&#39;咸阳&#39;,&#39;宝鸡&#39;);
            cities[1] = new Array(&#39;成都&#39;,&#39;绵阳&#39;,&#39;遂宁&#39;);
            cities[2] = new Array(&#39;济南&#39;,&#39;青岛&#39;,&#39;临沂&#39;);
            // 3 获取用户选择的城市
            var seleceEle = document.getElementById(&#39;city&#39;);
            // 4 清空第二个下拉列表的内容
            seleceEle.options.length = 1 ;
            // 2.3 遍历二维数组，比较省份编号和用户选择的省份
            for(var i = 0;i<cities.length;i++){
                // 2.4 如果选择省份编号为i,遍历城市
                if (province_Ele == i){
                    for(var j = 0;j<cities[i].length;j++){
                        // 2.5 创建城市的文本节点
                        var citynode = document.createTextNode(cities[i][j]);
                        // 2.6 创建option的属性节点
                        var optionnode = document.createElement(&#39;option&#39;);
                        // 2.7 将城市文本添加到option属性节点
                        optionnode.appendChild(citynode);
                        // 2.8 将option内容添加到select元素里面
                        seleceEle.appendChild(optionnode)
                    }
                }
            }
        }
    </script>

ログイン後にコピー

HTML DOM とは何ですか? HTML DOMの応用説明