什么是DOM？

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。

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 - 节点（元素）的属性节点

应用：动态添加城市

需求：当我们访问网页时，添加网页上所没有的地址

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动态添加城市</title>

    <script>

        function add_city() {

        // 1. 获取输入框值

        var cityEle= document.getElementById('city').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('city_line');

        // 6. 将li元素节点添加到ol标签里

        ulEle.appendChild(linode);

        }

    </script>

</head>

<body>

    <input type="text" id="city" placeholder="城市">

    // 确定事件类型'onclick'

    <input type="submit" value="添加" onclick="add_city()">

    <ol id="city_line">

        <li>西安</li>

        <li>拉萨</li>

        <li>成都</li>

    </ol>

</body>

</html>


应用：城市的二级联动

所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有两个下拉列表，第一列表是选择省份，那么我选择某一个省份，那么另一个列表也会对应显示该省份的城市。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <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('province').value;

            // 2.2 创建一个二维数组，用来存放省份和城市的对应关系

            var cities = new Array(3);

            cities[0] = new Array('西安','咸阳','宝鸡');

            cities[1] = new Array('成都','绵阳','遂宁');

            cities[2] = new Array('济南','青岛','临沂');

            // 3 获取用户选择的城市

            var seleceEle = document.getElementById('city');

            // 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('option');

                        // 2.7 将城市文本添加到option属性节点

                        optionnode.appendChild(citynode);

                        // 2.8 将option内容添加到select元素里面

                        seleceEle.appendChild(optionnode)

                    }

                }

            }

        }

    </SCRIPT>

</head>

<body>

<form>

    <div>

        <span>籍贯</span>

        // 1. 确定事件类型onchange, 并为其绑定一个函数

        <select id="province" onchange="choice_city()">

            <option>--省份--</option>

            <option value="0">陕西省</option>

            <option value="1">四川省</option>

            <option value="2">山东省</option>

        </select>

        <select id="city">

            <option>--市区--</option>

        </select>

    </div>

</form>

</body>

</html>


python大佬养成计划----HTML DOM的更多相关文章

  1. python大佬养成计划----HTML网页设计（序列）

    序列化标签 1.有序标签--ol和li 有序列表标签是<ol>,是一个双标签.在每一个列表项目前要使用<li>标签.<ol>标签的形式是带有前后顺序之分的编号.如果 ...

  2. python大佬养成计划----flask_bootstrap装饰网页

    flask_bootstrap Bootstrap 是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器. Boo ...

  3. python大佬养成计划----HTML网页设计（表格）

    制作网页时,要合理规划网页布局.比如,在网页中添加一个表格,可分为上.中.下三部分,上部存放网页标题或LOGO图片,中间部分是整个网页的主体内容,底部就是相关制作信息.此外,单元格里还可再添加单元格, ...

  4. python大佬养成计划----基于flask_sqlalchemy的网页显示数据库信息

    网页显示数据库信息 使用我们刚学习的flask_sqlalchemy,在网页中显示数据库表中的数据.在开始运行程序前,确保数据库中执行过创建表和创建用户的操作,详见链接描述. # 模板文件templa ...

  5. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  6. Python核心团队计划2020年停止支持Python2，NumPy宣布停止支持计划表

    Python核心团队计划在2020年停止支持Python 2.NumPy项目自2010年以来一直支持Python 2和Python 3,并且发现支持Python 2对我们有限的资源增加了负担:因此,我 ...

  7. 高手养成计划基础篇-Linux第二季

    高手养成计划基础篇-Linux第二季   本文来源:i春秋社区-分享你的技术,为安全加点温度   前言 前面我们学习了文件处理命令和文件搜索命令,简单的了解了一下Linux,但是仅仅了解这样还不行,遇 ...

  8. BZOJ 4212: 神牛的养成计划

    4212: 神牛的养成计划 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 142  Solved: 30[Submit][Status][Discus ...

  9. 【BZOJ-4212】神牛的养成计划 Trie树 + 可持久化Trie树

    4212: 神牛的养成计划 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 136  Solved: 27[Submit][Status][Discus ...

随机推荐

  1. spring maven依赖

    图解spring容器 核心容器(core container) spring-core 这个jar 文件包含Spring 框架基本的核心工具类.Spring 其它组件要都要使用到这个包里的类,是其它组 ...

  2. [Web 前端] 025 js 的对象、数组和数学对象

    1. Javascript 对象 1.1 创建对象 1.1.1 使用原始的方式创建内置对象 var myObject = new Object(); myObject.name = "lij ...

  3. 【监控笔记】【1.4】Pssdiag和Sqldiag管理器

    --没有实操过,有点复杂,先写上以后有用到再深入研究 统计与诊断数据是任何 SQL故障修复工作的关键所在. 如果没有掌握这些数据,就无法确定数据性能问题的根源.数据表的瓶颈可能并不是由索引问题造成的: ...

  4. [BZOJ 3456]城市规划(cdq分治+FFT)

    [BZOJ 3456]城市规划(cdq分治+FFT) 题面 求有标号n个点无向连通图数目. 分析 设\(f(i)\)表示\(i\)个点组成的无向连通图数量,\(g(i)\)表示\(i\)个点的图的数量 ...

  5. HNUSTOJ-1638 遍地桔子(贪心)

    1638: 遍地桔子 时间限制: 1 Sec  内存限制: 128 MB提交: 711  解决: 134[提交][状态][讨论版] 题目描述 为了实验室的发展,队长决定在实验室外面的空地种桔子树.空地 ...

  6. kotlin学习（8）泛型

    泛型的声明 与Java不同的是,Kotlin要求类型实参要么被显示的说明,要么能被编译器推导出来.因为Java在1.5版本才引入泛型,所以为了兼容过去的版本,可以不直接声明List类型的变量,而不说明 ...

  7. 使用 ref 和 out 传递数组注意事项

    1.与所有的 out参数一样,在使用数组类型的 out 参数前必须先为其赋值,即必须由被调用方为其赋值 示例 :在此例中,在调用方(Main 方法)中声明数组 theArray,并在 FillArra ...

  8. Redis---使用场景

    3.使用场景 计数器   可以对String进行自增自减运算,从而实现计算器功能.   Redis这种内存型数据库的读写性能非常高,很适合存储频繁读写的及数量 缓存   将热点数据放到内存中,设置内存 ...

  9. Android 开发环境部署

    引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环 ...

  10. 在浏览器输入URL发生了什么

    在我们输入google.com之后,浏览器上很快就会呈现出谷歌的页面,本文简单介绍一下从URL的输入到浏览器页面的展示,这中间发生了些什么. URL是什么URL全名叫统一资源定位符,uniform r ...