从零开始学 Web 之 DOM（一）DOM的概念，对标签操作
大家好，这里是「 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 ...
随机推荐
- node.js中Buffer缓冲器的使用
一.什么是Buffer Buffer缓冲器是用来存储输入和输出数据的一段内存.js语言没有二进制数据类型,在处理TCP和文件流的时候,就不是很方便了. 所以node.js提供了Buffer类来处理二进 ...
- concurrent.futures模块(进程池/线程池)
需要注意一下不能无限的开进程,不能无限的开线程最常用的就是开进程池,开线程池.其中回调函数非常重要回调函数其实可以作为一种编程思想,谁好了谁就去掉 只要你用并发,就会有锁的问题,但是你不能一直去自己加 ...
- 201621123002《JAVA程序设计》第五周学习总结
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 接口 interface关键字 implements关键字 Comparable abstract Comparator 1.2 ...
- 分布式协议学习笔记(三) Raft 选举自编写代码练习
由于时间安排上的原因,这次的代码写的稍微有些简略,只能算是自己对RAFT协议的一个巩固. 实现定义2个节点,使用读取配置文件来获取IP和端口以及节点ID 网络使用boost同步流程 一个线程收 一个线 ...
- python_day12_css
目录: 简介 选择器(selecttor) 常用属性 页面布局 一.简介 1.CSS 定义 CSS是Cascading Style Sheets的简称,中文称为层叠样式表. CSS 规则由两个主要的部 ...
- Python 多进程编程之 进程间的通信(Queue)
Python 多进程编程之 进程间的通信(Queue) 1,进程间通信Process有时是需要通信的,操作系统提供了很多机制来实现进程之间的通信,而Queue就是其中的一个方法----这是操作系统开辟 ...
- poj1284
一个欧拉函数的应用,当时也没有太搞清,这里直接用的当时的模板 #include<iostream> #include<cstdlib> #include<cstdio&g ...
- 结构体struct、联合体union、枚举类型enum
1.c语言中的类型 1)内置类型——char,short,int,float,double: 2)用户自定义类型(UDT)——struct结构体,union联合体,enum枚举类型 2.内存对齐 2. ...
- C++ MFC棋牌类小游戏day3
今天开始设计小人棋子. 画法跟画虎一样,唯一不一样的是小人在刚开始会有重叠的情况,所以画起来可能比虎的棋子能够难一点. 我打算用Location结构体中的num来标记每个棋盘坐标存在棋子的个数,isH ...
- 关于esp32的ADC采集
对于ADC采集 程序源码如下: /* ADC1 Example This example code is in the Public Domain (or CC0 licensed, at your ...