Java Web--HTML、CSS、JavaScript详细学习笔记（内含丰富示例代码）
**
Java Web–HTML、CSS、JavaScript学习笔记
**
HTML（Hyper Text Markup Language超文本标记语言）：控制的是页面的内容，是由标签组成的语言，能够展示超文本的效果。
CSS：控制的是页面的布局，视觉效果等
C/S结构：Client—Server 客户端到服务器
B/S结构：Browser—Server 浏览器到服务器
页面由三部分组成：内容（结构）、表现、行为。
内容（结构）：是我们在页面中可以看到的数据。我们称之为内容。一般内容，我们是使用html技术来展示。
表现：指的是这些内容在页面上的展示形式。比如说，布局，颜色，大小等等。一般使用CSS技术实现。
行为：指的是页面中元素与输入设备交互的响应。一般使用javaScript技术实现。
html一些标准格式：
<html>
<head>
<title> 放入标题 title>
head>
<body>
今天的天气真好哇 font>
body>
html>
HTML文件中注意事项：
HTML文件的拓展名为html或者htm。htm是老的命名规范，html是新的命名规范。
HTML文件由浏览器直接解析执行，无需编译，直接由上倒下一次执行。
HTML标签通常由开始标签和结束标签组成。例如：
开始标签和结束标签之间的内容叫做内容体。
HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如：
自关闭
HTML标签不区分大小写，为了方便阅读，建议使用小写。
HTML标签是有属性的，格式为：属性名 = “属性值”，属性值用引号引起，引号包括单引号和双引号。
HTML标签建议包裹嵌套，不建议交叉嵌套。
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标题title>
head>
<body>
hello
body>
html>
标签分为基本属性和事件属性：
1.基本属性
bgcolor：表示背景颜色属性
2.事件属性
onclick：表示单机（点击）事件
alert()：是JavaScript语言提供的一个警告框函数，它可以接收任意参数，参数就是警告框的函数信息。
常用的特殊字符：
< 对应 <
> 对应 >
空格 对应
标题标签：
如： 其中h1最大，h6最小
标签还能调节属性
超链接：
在网页中点击之后可以跳转的内容都是超链接。
表示超链接，
href属性设置链接的地址。
target属性设置哪个目标进行跳转。
_self 表示当前页面
_blank 表示打开新页面来进行跳转
列表标签：
分为：无序列表，有序列表
表示列表元素
例如：
<ul>
<li>赵四li>
<li>赵五li>
<li>赵六li>
<li>赵七li>
ul>
例如：
<ol>
<li>赵四li>
<li>赵五li>
<li>赵六li>
<li>赵七li>
ol>
Img标签
作用是显示图片
img标签是图片标签，用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置边框大小
alt属性当指定路径找不到图片时，用来代替显示的文本内容
在javaSE中路径也分为相对路径和绝对路径
相对路径：
从工程名开始算起
绝对路径：
盘符/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径：
. 表示当前目录
… 表示上一级目录
文件名 表示当前文件所在目录的文件，相当于./文件名(只是./可以省略)
绝对路径：
正确格式是：http://ip:port/工程名/资源路径
错误格式是：盘符/目录/文件名
table标签是表格标签
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置边框大小
cellspacing设置单元格间距
tr是行标签
b标签是加粗标签
th是表头标签
td是单元格标签
align设置单元格对齐方式
colspan属性设置跨列
rowspan属性设置跨行
iframe标签可以在页面上开辟一个小区域显示一个单独页面
iframe标签和a标签组合使用的步骤：
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name属性值
表单标签：
什么是表单？
表单是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
form标签就是表示表单
表示生成一个文本输入框
value属性设置输入框内的默认初始内容
表示密码输入框
表示的是单选框
性别：男女
可以用name属性来达到分组的效果，同一只组内的单选只能选一个
checked=“checked” 还可以用这个标签来达到一上来的默认选项，表示默认选中
表示的复选框
这个对标签表示的是下拉文本选择框
这对标签是下拉列表中的选项
selected = “selected” 文本框中的默认选项
表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows属性设置可以显示几行的高度
cols属性设置每行可以显示几个字符宽度
表示的是重置按钮 value属性修改按钮上的文字
表示的是提交按钮
表示的是创建一个按钮
表示的是文件上传域
表示的是隐藏域（应用场景，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域，提交的同时发送给服务器）
是表单标签
action属性设置的是提交的服务器地址
method属性设置的是提交的方式 GET或POST
1.表单在提交的时候，数据没有发送给服务器的三种情况：
1）表单项没有name属性值
2）单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3）表单项不在提交的form标签中
2.GET请求的特点是：
1）浏览器地址中的地址是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
例如：password=abc&sex=girl&hobby=java
2）不安全（例如提交的密码等会显示出来）
3）它有数据长度的限制
method=”get”：此方法可传送UPL中的表单内容：UPL?name=value&name=value。
注释：如果表单值包含非ASCII字符或者超过100个字符，则必须使用method=”post”。
method=”post”：此方法可传送request主体中的表单内容
3.POST请求的特点是：
1）浏览器地址栏中只有action属性值
2）相对于GET请求要更加的安全
3）理论上没有数据长度的限制
其他的标签：
div标签：默认独占一行
span标签：它的长度是封装数据的长度
p段落标签：默认会在段落的上方或下方各空出一行来（如果已有就不再空）
CSS技术介绍
CSS是【层叠样式表单】，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
语法规则：
选择器p{
font-size: 80px;
}
选择器：浏览器根据“选择器”决定CSS样式影响的元素（标签）。
属性（property）：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p{color:blue;}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号（但是尽量在每条声明的末尾都加上分号）
CSS和HTML的结合方式
第一种：
在标签的style属性上设置”key:value value;”，修改标签的样式。
这样使用的缺点：
1）如果标签多了。样式多了。代码量会非常的庞大。
2）可读性很差
3）CSS代码没什么复用性可言
第二种：
在head标签中，使用style标签来定义各种自己需要的CSS样式。
格式如下：
xxx {
key : value value;
}
这样使用的缺点：
1）只能在同一页面复用代码，不能在多个页面中复用CSS代码。
2）维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修稿，工作量太大。
第三种：
把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用
使用html的标签，导入CSS样式文件。
CSS选择器
标签名选择器：
标签名选择器的格式是：
标签名{
属性：值；
}
标签名选择器的作用是，可以决定哪些标签被动地使用这个样式。
id选择器
#id属性值{
属性：值；
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 5px;
border: 2px aquamarine dotted;
}
style>
head>
<body>
<div id="id001">div标签1div>
<div id="id002">div标签2div>
body>
html>
class选择器（类型选择器）
class类型选择器的格式是：
.class属性值{
属性：值；
}
class类型选择器，可以通过class属性有效地去使用这个样式。
组合选择器：
组合选择器的格式是：
选择器1，选择器2，选择器n{
属性：值；
}
组合选择器的作用是，可以让多个选择器共用同一个CSS样式代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器title>
<style type="text/css">
.class01, #id002{
color: beige;
font-size: 2px;
border: #ff2d91 solid 2px;
}
style>
head>
<body>
<div class="class01">div标签class01div>
<div class="class02">div标签div>
<div id="id002">div标签3div>
<span class="class01">span标签class01span>
<span>span标签2span>
body>
html>
JavaScript语言入门
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要进行浏览器来解析执行JavaScript代码。JS是Netscape网景公司的产品，最早取名为LiveScript；为了吸引更多java程序员。更名为JavaScript。
JS是弱类型，Java是强类型。
弱类型，就是定义变量的时候。类型已经确定，而且不可变。
特点：
1）交互性（它可以做的就是信息的动态交互）
2）安全性（不允许直接访问本地硬盘）
3）跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）
JavaScript和html代码的结合方式
第一种方式：
只需要在head标签中，或者在body标签中，使用script标签 来书写JavaScript代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
//alert是JavaScript语言提供的一个警告框函数
alert("hello JavaScript");
script>
head>
<body>
body>
html>
第二种方式：
使用script标签引入单独的JavaScript代码文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="01_js.js">script>
<script type="text/javascript">
alert("真是不错啊")
script>
head>
<body>
body>
html>
也就是在一个script标签下只能干一件事。
Js中的变量：
什么是变量？变量是可以存放某些值的内存的名字。
JavaScript的变量类型：
数值类型； number int , double等等
字符串类型；string
对象类型； object
布尔类型； boolean
函数类型； function
JavaScript里特殊的值：
undefined 未定义，所有js变量为赋予初始值的时候，默认值都是undefined
null 空值
NAN 全称是Not a Number，非数字，非数值
js中定义变量格式：
var 变量名;
var 变量名 = 值;
关系（比较）运算
< >= > =
以上关系运算符使用的时候和java类似
等于：== 等于是简单地做字面值的比较
全等于：=== 除了做字面值的比较之外，还会比较两个变量的数据类型
逻辑运算：
且运算：&&
或运算：||
取反运算：!
在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用。
0、null、undefined、””(空串)都认为是false
&&与运算和||或运算 有短路
短路的意思是，当这个&&或||运算有结果之后。后面的表达式不再执行。
数组：
Js中数组的定义：
格式：
var 数组名 = []; //空数组
var 数组名 = [1, ‘abc’, true] //定义数组的同时赋值元素
JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动地给数组做扩容操作。
函数：
函数的两种定义方式
第一种：可以使用function关键字来定义函数
使用的格式如下：
function 函数名（形参列表） {
函数体
}
在JavaScript中如何定义带有返回值的函数？
只需要在函数体内直接使用return语句返回即可
<html lang="en">
<head>
<meta charset="UTF-8">
<title>functiontitle>
<script type="text/javascript">
//定义一个无参函数
function fun(){
alert("无参函数被调用了");
}
fun();
//定义一个带参函数
function fun2(a, b) {
alert("有参函数fun2()被调用了 a => " + a + "b =>" + b);
}
fun2(2, 3);
//定义一个有返回值的函数
//注函数的参数不能够指定类型
function fun3(num1, num2) {
var result = num1 + num2;
return result;
}
alert(fun3(3, "adgfsd"));
script>
head>
<body>
body>
html>
函数的第二种定义方式，格式如下：
使用格式如下：
var 函数名 = function(形参列表) {
函数体;
}
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function2title>
<script type="text/javascript">
var fun = function() {
alert("无参函数");
}
fun();
var fun2 = function(a, b) {
alert("有参函数a = " + a + " b = " + b);
}
fun2(3, 4);
var fun3 = function(num1, num2) {
return num1 + num2;
}
fun3(4, 5);
script>
head>
<body>
body>
html>
注意：在Java中函数允许重载，但是在JS中函数重载会直接覆盖掉上一次的定义，也就是说不允许重载。
函数的arguments隐性参数（只在function函数内）
就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量，这就叫做隐性参数。
隐性参数特别像java基础中的可变成参数
public void fun(Object …args);
可变长参数其实是一个数组
JS中的隐性参数也和java中可变长参数一样，操作类似数组。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>argumentstitle>
<script type="text/javascript">
function fun() {
//alert(arguments.length); 可查看参数个数
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
alert(arguments[3]);
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
alert("无参函数fun()");
}
fun(1, 2, 3, "abf");
script>
head>
<body>
body>
html>
JS中的自定义对象（扩展内容）
Object形式的自定义对象
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function //定义一个函数
对象的访问：
变量名.属性/函数名称
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义对象title>
<script type="text/javascript">
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function() {
alert("姓名：" + this.name + " , 年龄" + this.age);
}
alert(obj.age);
alert(obj.fun);
script>
head>
<body>
body>
html>
{}花括号形式的自定义对象
var 变量名 = {}; //空对象
var 变量名 = {
属性名：值； //定义一个属性
属性值：值 //定义最后一个属性的时候后面不能够加分号
函数名：function() {}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CustomObjecttitle>
<script type="text/javascript">
var obj = {
name: "国哥";
age: 18;
fun: function() {
alert("姓名： " + this.name + " , 年龄" + this.age);
}
};
alert(obj.name);
obj.fun();
script>
head>
<body>
body>
html>
js中的事件
什么是事件？
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
onload加载完成事件； 页面加载完成之后，常用于做页面js代码初始化操作
onclick单击事件； 常用于按钮的点击响应操作
onblur失去焦点事件； 常用于输入框失去焦点后验证其输入内容是否合法
onchange内容发生改变事件； 常用于下拉列表和输入框内容发生改变后操作
onsubmit表单提交事件； 常用于表单提交前，验证所有表单是否合法
事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件：
通过html标签的事件属性直接赋予事件响应后的代码，这种方式叫做静态注册。
<body onload="alert('静态注册onload事件')">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onloadtitle>
<script type="text/javascript">
//onload事件的方法
function onloadFun() {
alert("静态注册onload事件，所有代码");
}
script>
head>
<body onload="onloadFun();">
body>
html>
动态注册事件：
是指先通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function(){} 这种赋予事件响应后的代码，叫动态注册。
动态注册的基本步骤：
1.获取标签对象
2.标签对象.事件名 = function() {}
onload事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onloadtitle>
<script type="text/javascript">
//onload事件的方法
function onloadFun() {
alert("静态注册onload事件，所有代码");
}
//onload事件动态注册，是固定写法
window.alert("动态注册的onload事件");
script>
head>
<body onload="onloadFun();">
body>
html>
onclick事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclicktitle>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
function onclickFun2() {
alert("还挺不错的哈");
}
script>
head>
<body>
<button onclick="onclickFun();">按钮1button>
<button onclick="onclickFun2();">按钮2button>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclicktitle>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
//动态注册onclick事件
window.onload = function() {
//1.获取标签对象
/*
*document是JavaScript语言提供的一个对象(文档)
* document就是表示整个页面
*
* getElementById()
*
* get 获取
* Element 元素（也就是标签）
* By 通过。。 由。。经。。
* Id id属性
* getElementById() 通过Id属性获取标签对象
*/
var btnobj = document.getElementById("btn01");
alert(btnobj);
//2.通过标签对象.事件名 = function() {}
btnobj.onclick = function() {
alert("动态注册的onclick事件");
}
}
script>
head>
<body>
<button onclick="onclickFun();">按钮1button>
<button onload="onclickFun()">按钮2button>
body>
html>
onblur事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblurtitle>
<script type="text/javascript">
//静态注册失去焦点事件
function onblurFun() {
//console是控制台对象，是由JavaScrip语言提供，专门用于来向浏览器的控制器打印输出，用于测试使用
//log() 是打印的方法
console.log("静态注册失去焦点事件");
}
//动态注册失去焦点事件
window.onload = function() {
//1.获取标签对象
let passwordobj = document.getElementById("password");
alert(passwordobj);
//2.通过便签对象.事件名 = function() {};
passwordobj.onblur = function() {
console.log("动态失去焦点事件");
}
}
script>
head>
<body>
用户名：<input type="text" onblur="onblurFun();"><br/>
密码：<input id="password" type="text"><br/>
body>
html>
onchange事件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchangetitle>
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function() {
let selectobj = document.getElementById("select01");
alert(selectobj);
selectobj.onchange = function() {
alert("男神已改变");
}
}
script>
head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun();">
<option>----女神----option>
<option>----女神1----option>
<option>----女神2----option>
<option>----女神3----option>
<option>----女神4----option>
<option>----女神5----option>
select>
请选择你心中的男神：
<select id="select01">
<option>----男神----option>
<option>----男神1----option>
<option>----男神2----option>
<option>----男神3----option>
<option>----男神4----option>
<option>----男神5----option>
select>
body>
html>
onsubmit表单提交事件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmittitle>
<script type="text/javascript">
//静态注册表单提交事件
function onsubmitFun() {
//要验证表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件");
return false;
}
window.onload = function() {
let formobj = document.getElementById("form001");
formobj.onsubmit = function() {
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
script>
head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
form>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input id="form001" type="submit" value="动态注册"/>
form>
body>
html>
DOM模型
DOM全称是Document Object Model文档对象模型
简单理解就是，把文档中的标签，属性，文本转换成对象来管理
模拟对象化，相当于：
class Dom {
private String id; //id属性
private String tagName; //表示标签名
private Dom parentNode; //父亲
private List children; //孩子结点
private String innerHTML; //起始标签和结束标签中间的内容
}
Document对象的理解：
1.Document它管理了所有的HTML文档内容
2.document它是一个树结构的文档。有层级关系
3.它让我们把所有的标签都对象化（用一个类去记录标签的信息）
4.我们可以通过document访问所有的标签对象
document对象中的方法介绍
document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值
document.getElementsByTagName(tagName)
通过标签名直接查找标签对象。tagName是标签名
document.createElement(tagname)
方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementByIdtitle>
<script type="text/javascript">
function onclickFun() {
var usernameObj = document.getElementById("username");
alert(usernameObj); //[object HTMLInputElement]就是dom对象
alert(usernameObj.id);
alert(usernameObj.type);
alert(usernameObj.value);
var usernameText = usernameObj.value;
//如何验证字符串符合某个规则，需要使用正则表达式技术
var patt = /^\w{5, 12}$/;
/*
*test()方法用于测试某个字符串，是不是匹配我的规则
* 匹配就返回true，不匹配就返回false
*/
if (patt.test(usernameText)) {
alert("用户名合法！");
}
else {
alert("用户名不合法");
}
}
script>
head>
<body>
用户名：<input type="text" id="username" value="kkkoke">
<button onclick="onclickFun()">校验button>
body>
html>
正则表达式对象（regularExpression）
什么是regular expression？
ReExp是正则表达式的缩写
当你检索某个文本时，可以使用一种模式来描述要检索的内容。ReExp就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可以用于解析，格式检索，替换等等。
你可以规定字符串的检索位置，以及要检索的字符类型等等。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>regularExpressiontitle>
<script type="text/javascript">
//表示要求字符串中，是否包含字母e
//var patt = new RegExp("e");
var patt = /e/; //同样是regular expression
alert(patt);
var str = "abecd";
alert(patt.test(str));
script>
head>
<body>
body>
html>
getElementsByName()方法
返回带有指定名称的对象集合。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementByNametitle>
<script type="text/javascript">
function checkAll() {
//document.getElementByName()是根据指定的name属性查询返回多个标签对象集合
//这个集合的操作和数组是一样的，集合中就是标签对象
//集合中每个元素都是dom对象
//这个集合中的元素顺序是他们在html页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
//checked表示复选框的选中状态。如果选中是true，不选中是false
//这个属性可读，可写
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
function checkNo() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked == false) {
hobbies[i].checked = true;
}
else {
hobbies[i].checked = false;
}
//也可以直接hobbies[i].checked = !hobbies[i].checked;
}
}
script>
head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp"> C++
<input type="checkbox" name="hobby" value="java"> java
<input type="checkbox" name="hobby" value="js"> JavaScript
<br/>
<button onclick="checkAll();">全选button>
<button onclick="checkNo();">全不选button>
<button onclick="checkReverse();">反选button>
body>
html>
getElementsByTagName()方法
返回带有指定标签名的对象集合。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByTagNametitle>
<script type="text/javascript">
//全选
function checkAll() {
var hobbies = document.getElementsByTagName("input");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
script>
head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp"> C++
<input type="checkbox" value="java"> java
<input type="checkbox" value="js"> JavaScript
<br/>
<button onclick="checkAll();">全选button>
body>
html>
注：document对象的三个查询方法，如果有id属性，优先使用getElementById()方法来进行查询。如果没有id属性，则优先使用getElementsByName()方法来进行查询。如果id属性和Name属性都没有再按标签查getElementsByTagName()方法;
以上三个方法，代码一定要在页面加载完成之后执行，才能查询到标签对象。
createElement()方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>creatElementtitle>
<script type="text/javascript">
window.onload = function() {
var divObj = document.createElement("div"); //在内存中
divObj.innerHTML = "我真是帅啊"; //标签我真是帅啊已经创建，但还是只在内存中。
//添加子元素
document.body.appendChild(divObj);
}
script>
head>
<body>
body>
html>
节点的常用属性和方法
什么是节点？
节点就是标签对象。
常用的方法：
getElementsByTagName()方法，获取当前节点的指定标签名孩子节点。
appendChild(oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点。
属性：
childNodes，获取当前节点的所有子节点
firstChild，获取当前节点的第一个子节点
lastChild，获取当前节点的最后一个子节点
parentChild，获取当前节点的父节点
nextSibling，获取当前节点的下一个节点
previousSibling，获取当前节点的上一个节点
className，用于获取或设置标签的class属性值
innerHTML，表示获取/设置起始标签和结束标签中的内容
innerText，表示获取/设置起始标签和结束标签中的文本