大家好，这里是「 Daotin的梦呓」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、DOM概念

DOM 的全称为：Document Object Model 文档对象模型

我们把 html 文件看成一个文档，因为万物皆对象，所以这个文档也是一个对象。这个文档中所有的标签都可以看成一个对象，比如 div 标签，p 标签等。

1、相关概念

html 页面有一个根标签 html 标签。
标签也叫元素，也叫对象。
页面中的顶级对象：document。

节点（node）：页面中所有的内容都是节点。包括标签，属性，文本等

xml 文件也可以看成一个文档。

html：侧重于展示数据。

xml：侧重于存储数据。

2、DOM树

文档下面有根标签 html，html 下有 head 和 body 标签，head 下又有 title 等，body 下又有 div 等。

由文档及文档中的所有元素（标签）组成的树状结构，叫树状图（DOM树）

二、DOM的作用

DOM的作用主要是：操作页面的元素（标签）。

DOM经常进行的操作

获取元素
动态创建元素
对元素进行操作（设置属性或调用其方法）
事件（什么时机做相应的操作）

三、DOM初体验

基本上分三步走：

根据 id 等获取元素
为获取的元素注册事件
添加事件处理函数

注意：所有function后面都有分号。

1、对标签的操作

1.1、点击按钮，弹出对话框

<body>

    <input type="button" value="按钮" id="btn">

    <script>

        document.getElementById("btn").onclick = function () {

            alert("hahahaha");

        };

    </script>

</body>

1.2、点击按钮显示图片，并设置图片宽高

<body>

    <input type="button" value="按钮" id="btn">

    <img src="" id="im">

    <script>

        document.getElementById("btn").onclick = function() {

            document.getElementById("im").src = "1.png";

            document.getElementById("im").width = 600;

            document.getElementById("im").height = 200;

        };

    </script>

</body>

document.getElementById("xxx"); 返回值是一个标签对象，利用这个对象可以操作其中的元素，像 type，value 等都是它的元素。

注意：html 标签里面的 width 和 height 属性是不需要加 px 的，css 的 style 里面的宽高才要加。

1.3、点击按钮修改 p 标签的内容

<body>

    <input type="button" value="按钮" id="btn">

    <p id="p1">p标签</p>

    <script>

        document.getElementById("btn").onclick = function() {

            document.getElementById("p1").innerText = "我是一个P标签";

        };

    </script>

</body>

凡是成对的标签，设置中间的中间的文本内容，都是用innerText属性。

1.4、点击按钮设置所有的 p 标签内容

<body>

	<input type="button" value="按钮" id="btn"/>

	<div>

		<p>hello</p>

		<p>hello</p>

		<p>hello</p>

	</div>

	<div>

		<p>Daotin</p>

		<p>Daotin</p>

		<p>Daotin</p>

	</div>

	<script>

		document.getElementById("btn").onclick = function () {

			var pObjs = document.getElementsByTagName("p");			

			for(var i=0; i<pObjs.length; i++) {

				pObjs[i].innerText = "world";

			}

		}

	</script>

</body>

如果只想设置第一个 div 里面的 p标签怎么办呢？

<body>

	<input type="button" value="按钮" id="btn"/>

	<div id="box">

		<p>hello</p>

		<p>hello</p>

		<p>hello</p>

	</div>

	<div>

		<p>Daotin</p>

		<p>Daotin</p>

		<p>Daotin</p>

	</div>

	<script>

		document.getElementById("btn").onclick = function () {

			var pObjs = document.getElementById("box").getElementsByTagName("p");			

			for(var i=0; i<pObjs.length; i++) {

				pObjs[i].innerText = "world";

			}

		}

	</script>

</body>

1.5、点击按钮修改图片的 alt 和 title 属性

<body>

<input type="button" value="按钮" id="btn">

<img src="1.png" alt="Google" title="logo">

<script>

    document.getElementById("btn").onclick = function () {

        var imgObjs = document.getElementsByTagName("img");

        imgObjs[0].alt = "Daotin";

        imgObjs[0].title = "nihao";

    };

</script>

</body>

imgObjs[0]：代表的就是伪数组的第一个对象。

1.6、点击按钮修改多个文本框的值

<body>

<input type="button" value="点击按钮填充文本" id="btn"><br>

<input type="text" value=""><br>

<input type="text" value=""><br>

<input type="text" value=""><br>

<input type="text" value=""><br>

<input type="text" value=""><br>

<script>

    document.getElementById("btn").onclick = function (ev) {

        var inputs = document.getElementsByTagName("input");

        for (var i = 0; i < inputs.length; i++) {

            // 判断 type 是否为text

            if(inputs[i].type === "text") {

                // 这时候不能使用 innerText ，因为这不是成对的标签

                inputs[i].value = "Daotin,你好啊";

            }

        }

    };

</script>

</body>

1.7、点击按钮修改 value 属性

<body>

<input type="button" value="点击按钮填充文本" id="btn"><br>

<script>

    var btnObj =  document.getElementById("btn");

    btnObj.onclick = function (ev) {

        // btnObj.value = "Daotin";

        // btnObj.type = "text";

        // btnObj.id = "btn2";

        this.value = "Daotin";

        this.type = "text";

        this.id = "btn2";

    };

</script>

</body>

在一个对象的事件里面对当前事件的属性的操作，可以使用this.属性来修改。

1.8、按钮的排他功能

<body>

<input type="button" value="lvonve">

<input type="button" value="lvonve">

<input type="button" value="lvonve">

<input type="button" value="lvonve">

<input type="button" value="lvonve">

<script>

    // 获取全部按钮

    var btnObjs = document.getElementsByTagName("input");

    // 循环为所有按钮注册点击事件

    for(var i=0; i<btnObjs.length; i++) {

        btnObjs[i].onclick = function (ev) {

            // 先设置点击每个按钮的时候将所有的按钮value为lvonve

            for(var j=0; j<btnObjs.length; j++) {

                btnObjs[j].value = "lvonve";

            }

            //再设置当前点击的按钮为Daotin

            this.value = "Daotin";

        };

    }

</script>

</body>

并不是我们通常想的，点击某一个按钮的时候，将之前点击的按钮恢复，而是点击每一个按钮之前，将所有的按钮恢复。

1.9、点击图片修改路径

<body>

<input type="button" value="lvonve" id="btn">

<img src="1.png" id="im">

<script>

    function myid(id) {

        return document.getElementById(id);

    }

    myid("btn").onclick = function (ev) {

        myid("im").src = "2.jpg";

    };

</script>

</body>

如果有多个地方都使用了document.getElementById("") 的话，可以封装成一个函数来调用。

1.10、点击按钮选择性别和兴趣

<body>

<input type="button" value="修改性别" id="btn1">

<input type="radio" value="1" name="sex">男

<input type="radio" value="2" name="sex" id="nv">女

<input type="radio" value="3" name="sex">保密

<br>

<input type="button" value="选择兴趣" id="btn2">

<input type="checkbox" value="1" name="hobby" id="chi">吃饭

<input type="checkbox" value="2" name="hobby">睡觉

<input type="checkbox" value="3" name="hobby" id="play">打豆豆

<script>

    function my$(id) {

        return document.getElementById(id)

    }

    my$("btn1").onclick = function () {

        my$("nv").checked = true; // 填“checked”等同于true

    };

    my$("btn2").onclick = function () {

        my$("chi").checked = true;// 填“checked”等同于true

        my$("play").checked = true;// 填“checked”等同于true

    };

</script>

</body>

1、在单标签中，如果属性对应的值只有一个，而且值和属性同名，那么 js 操作 DOM 的时候，这个属性值可以用布尔类型表示。比如：checked="checked" selected="selected" disabled="disabled" readonle="readonly" 等。

2、在上面例子，不管是写 "checked"还是其他任何的字符串，都会选中的，因为非空字符串都会被浏览器转换成 true。

3、在 html 中，如果属性的值只有一个，可以直接写这个属性，而不需要赋值，也是有效的。比如：<input type="text" value="文本" readonly /> 这个时候，这个文本框也是被禁用的。

从零开始学 Web 之 DOM（一）DOM的概念，对标签操作的更多相关文章

从零开始学 Web 之 CSS（二）文本、标签、特性
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
从零开始学 Web 系列教程
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http:/ ...
从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
从零开始学 Web 之 DOM（四）节点
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
从零开始学 Web 之 DOM（五）元素的创建
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
从零开始学 Web 之 DOM（七）事件冒泡
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
从零开始学 Web 之 Vue.js（六）Vue的组件
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...

随机推荐

centos关机与重启命令 shutdown -r now 立刻重启
centos关机与重启命令详解与实战 Linux centos重启命令: .reboot .shutdown -r now 立刻重启(root用户使用) .shutdown -r 过10分钟自动重启( ...
Windows下PythonQt3.2使用pandas.pivot_table
本机环境 1.win7 64 旗舰版 2.Qt 5.9.1(MSVC 2015,32 bit) 3.Python 3.7.1 (32-bit),二进制包安装的,即Windows x86 execut ...
【Mybatis】MyBatis快速入门（一）
Mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可 ...
返回头部js
$('.backTop, .backCss').click(function() { var id=$(this).attr('class'); $('html, body').animate({sc ...
Python Day 14 迭代器、for循环原理、枚举、生成器
阅读内容内容回顾带参装饰器和wraps用法迭代器知识引入可迭代对象迭代器对象 for循环迭代器枚举对象生成器 ##内容回顾函数的嵌套定义:在函数内部定义另一 ...
spring中的aop演示
一.步骤(XML配置) 1.导包4+2+2+2 2.准备目标对象 3.准备通知 4.配置进行织入,将通知织入目标对象中 <! -- 3.配置将通知织入目标对象> 5.测试二.步骤(注解配 ...
C语言中，int型函数返回值可以为bool型。
参考:https://bbs.csdn.net/topics/360116265. 问题: 如一个函数如下: int aa( int a, int b ) //举个例子,不要纠结功能. { if(a ...
s32 kickstart 批量自动安装系统
1. 自动安装操作系统 http://blog.oldboyedu.com/autoinstall-kickstart/ 自动安装操作系统的解决方案:kickstart.cobbler(披着web ...
Mingw下载
http://ismdeep.oss-cn-shenzhen.aliyuncs.com/x86_64-5.3.0-release-posix-seh-rt_v4-rev0.7z
python_day1_程序交互
程序交互在编写程序过程中总会有程序与用户交互的场景出现,这里面提到python会使用一个方法:input 用法: 例如:请用户输入一个账号 input"Please input your ...

从零开始学 Web 之 DOM（一）DOM的概念，对标签操作