大家使用数组估计最让人厌烦的就是对数组进行赋初值,要不就是手动的进行赋值要不就是使用for循环进行赋值。在ES6中可以使用fill方法进行数组的初始化。fill方法接收3个参数,第一个参数是赋值的值为必要参数,第二个参数是赋值开始的起始位置,第3个参数是赋值开始的终止位置此位置不会进行赋值。
当只有第1个参数是默认设置数组的所有值为参数1的值。
当只有第1,2两个参数值设置从第2个值的位置到数组的末尾使用参数1的值进行赋值。
同时还需要注意的是不能对超出数组长度的值进行赋值。
请看下面的演示程序。
<!DOCTYPE html>
<html>
<head>
<title>数组的fill方法</title>
<meta charset="utf-8">
</head>
<body>
<textarea style="height: 500px;width: 300px;" id="value"></textarea>
</body>
<script>
let dom=document.getElementById("value");
let str=[]
let a=new Array(5);
str.push(`the init value is ${a}`);
a.fill(1);
str.push(`the a.fill(1) value is ${a}`);
a.fill(2,1);
str.push(`the a.fill(2,1) value is ${a}`);
a.fill(3,3,5);
str.push(`the a.fill(3,3,5) value is ${a}`);
a.fill(3,5,10);
str.push(`the a.fill(3,5,10) value is ${a}`);
a.length=10
a.fill(3,5,10);
str.push(`after set length is 10 the a.fill(3,5,10) value is ${a}`);
dom.value=str.join("\n");
</script>
</html>
输出结果为:
从结果上我们可以看到上述的结论。但是使用fill对数组进行赋值还是有一些局限性的,只能赋值一部分的位置的值为一个相同的值。
CSS的介绍
CSS,Cascading Style Sheets层叠样式表。
一个网页由三个部分:结构、表现、行为,对应的标准是:XHTML、CSS、JavaScript。
这三个标准语言,是浏览器直接可以识别的,并且能直接进行解释(翻译)的。
CSS的格式
一个CSS样式表(<style></style>)由多个CSS规则构成;
一个CSS规则由“选择器”和{}构成;
选择器就是给哪一个HTML元素定义;
CSS选择器
第一:基本选择器(单一)
通用选择器(*):将匹配所有的HTML元素;
标签选择器:对应所有的HTML标记,名称与标记名称一样。
类选择器:可以通过给一类HTML元素,定义同一个class属性来增加样式。类样式定义以“.”开头定义。CSS的CLASS属性一般给层叠样式用表。比如:
.news表示class=news的元素增加样式
news表示class=news的<div>元素增加样式
.news title表示class=news下的class=title的<div>元素
ID选择器:给标记特定ID属性的HTML元素来增加样式。\
Id选择器的定义,以“#”号开头
网页不能出现同一个ID的值,ID像身份证号,具有唯一性;
HTML元素的ID属性,一般给JavaScript使用
第二:组合选择器
多元素选择器:也就是同时给多个HTML元素定义。
body,p,a,ul,li,p{margin:0px;padding:0px;}
每一个HTML元素都具有默认样式。
后代元素选择器:用空格来分隔各个选择器。
.news .title p{background-color:#FF0000;}
子元素选择器:用>号来分隔父子选择器,不存在第三层级的问题。
第三:伪类选择器
伪类选择器一般是给超链接<a>标记来增加样式。
超链接具有四个状态:
正常状态 a:link{ }
放上状态 a:hover{ }
激活状态a:active{ }
访问过状态 a:visited{ }
全局链接
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{color:#FF0000,text-decoration:underline;}
给链接增加类样式 (class=“a2”)
a.a2:link,a.a2:visited{ }
a.a2:hover{ }
CSS的继承性
CSS内部元素将继承外部元素的样式,多个外层元素的样式就叠加到内层元素上。<body>元素是网页中最大的标记,它中的样式将被其它子元素继承。
哪些CSS属性能被继承:color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等
引入CSS的方式
(1)内嵌式
通过<style></style>来书写CSS代码。
只能应用于当前网页,不能被其它网页共享。
注意:<style>标记可以放在网页的任何地方,但一般放在<head>。
(2)外联式
通过<link>标记来引入外部的CSS文件(.css)。
可以被其它网页共享。public.css index.css news.css about.css
格式:<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意:<link>标记只能放在<head>中
(3)行内样式
通过style的属性来书写CSS代码。
每一个HTML元素,都有 style、class、id、name、title 属性。
举例:<p style=“font-size:24px;”></p>
CSS的字体/文本属性
Font-size:文字大小
Font-weight:加粗
Font-style:斜体
Color:颜色
Line-height:行高
Text-indent:首行缩进
Text-align:水平对齐
Letter-spacing:字符间距
CSS列表
List-style-type:列表类型,取值:none、circle、 square
List-style-position:符号位置,取值:inside、outside
List-style-image:图片路径,举例:list-style-image:url(images/li01.gif);
Background-color:背景颜色
Background-image:背景图片,举例:background-image:url(images/bg.gif);
Background-repeat:背景平铺,取值:no-repeat(不平铺)、repeat(平铺)、repeat-x(x方向)、repeat-y(y方向)
Background-position:背景定位,取值:固定值或百分比
格式:background-position:水平方向 垂直方向;
用固定值定位:background-position:100px 0px; //距离左边100px,距离上边0px
用百分比定位:background-position:50% 50%; //水平方向居中 垂直方向居中
用单词来定位:background-postion:left|center|right top|center|bottom; 三个值取其中一个
Background-attachment:附加信息,取值:scroll(滚动)、fixed(固定)
简写形式:background:url(images/bg.gif) repeat-x 100px 0px; //多个属性值间用“空格”隔开
Float:元素浮动,取值:left或right。
Clear:清除浮动,取值:left或right或both
CSS浮动元素将向左向右浮动;
浮动可以叫“飘”起来;
浮动的元素,直到碰到父元素的边框或前一个浮动元素的边框为止;
浮动元素是一个块元素框,不管它原来是什么元素(行内元素);
浮动元素不再占用空间,脱离了普通文档流,层级比普通元素的级别高;
清除浮动
清除浮动特性后,清除元素之后的其它元素将恢复默认排版;
清除浮动特性后,包围元素从视觉上看起来,像包围住了浮动元素;
Border:同时设置四个边框的属性
Border-left:设置左边框的属性
Border-right:设置右边框的属性
Border-top:设置顶边框的属性
Border-bottom:设置底边框的属性
格式:border-bottom:粗细 线型 线颜色;
举例:border-bottom:2px solid #FF0000; //元素的下边线为2px粗的实线,颜色为红色
线型取值:none(无边线)、solid(实线)、dashed(虚线)、dotted(点状线)、double(双线)
每一个HTML元素可以看成一个“盒子”。
一个“盒子”具有:宽度、边框、内填充、外边距
宽度(width)和高度(height):是指内容的宽度和高度,不含边框、外边距、内填充。
内填充(padding):是指内容到边框线间的距离,含四个方向:上、右、下、左
外边距(margin):是指边框线以外的距离。
计算一个“盒子”的总空度
假设:总宽度为100px,边框为1px,内填充为10px,求内容的宽度
Width=100px – 1px*2 -10px*2=78px
假设:总宽度为100px,内容的宽50px,求左右内填充分别是多少?
Padding-left=(100px – 50px )/2=25px
Padding-left:左边线到内容间的距离
Padding-right:右边线到内容间的距离
Padding-top:顶边线到内容间的距离
Padding-bottom:底边线到内容间的距离
Padding:同时设置四个边的内填充距离
padding:10px; //表示:上下左右四个内填充都是10px
padding:5px 10px; //表示:上下为5px,左右为10px
padding:5px 10px 15px; //表示:上为5px,左右为10px,下为15px
padding:5px 10px 15px 20px; //表示:上右下左分别设置不同的内填充,顺序不可乱
Margin-left:左边线以外的距离
Margin-right:右边线以外的距离
Margin-top:顶边线以外的距离
Margin-bottom:底边线以外的距离
Margin:10px; //表示:四个外边距都是10px
Margin:10px 15px; //表示:上下外边为10px,左右外边距为15px
Margin:5px 10px 15px //表示:上外边距为5px,左右外边距为10px,下外边距为15px
Margin:5px 10px 15px 20px; //分别设置四外外边距,顺序为“上右下左”
一、首先要确定的事情
主页的宽度:973px
主页的背景色、背景图片
网页的结构:网页头部、网页尾部、网页主要内容(左右两列)
二、网页结构图
. DOM对象认识
1.1 什么是DOM对象
DOM模型的全称是:Document Object Model, 即:文档对象模型,它定义了操作文档对象的接口。
WEB页面的HTML文档,document就是根节点,其它的子对象就是子结点.
DOM模型在AJAX开发中的作用
在ajax中,DOM模型其实是最核心的结构,是所有ajax开发的基础架构.如果没有DOM模型,就没有办法在客户端改变页面的内容,所有的局部刷新,异步请求也就无从实现。熟练掌握DOM模型的相关技术,才算真正掌握了ajax开发精髓。
1.2 浏览器装载和显示页面的过程
1. 下载源代码
2. 通过页面源代码加载相关内容到内存,也就是根据HTML源码在内存中构建相关DOM对象。
3. 根据DOM对象的相关属性,来进行显示。
1.3 DOM节点分类node
1.3.1 节点的概念
在DOM模型中,整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。
1.3.2 节点的类型
元素结点、文本结点和属性结点
<font id=“font1” color=“red”>hello DOM!</font>
文本节点和属性结点都看作元素结点的子结点
我们一般所说的结点指的就是元素结点。
1.3.3 节点的基本属性
nodeName:元素结点返回结点类型(即,标记名称);属性结点返回属性名称,文本节点返回"#text".
nodeType:元素节点返回1,属性节点返回2,文本节点返回3
nodeValue:元素节点返回null, 属性节点返回属性值, 文本结点返回文本值。
1.4 DOM节点关系
浏览器在解析文档之前会将文档读取到内存形成DOM树,树形节点存在相关层级关系,常用关系如下所示:
根节点(root): 所有节点的顶层节点
父子节点(parent-child):<html> 元素作为父级,<head> 和 <body> 元素作为子级
兄弟节点(Sibling):<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系
叶子节点: 没有任何子节点的节点
空节点: 没有任何内容的节点
2. DOM对象的获取
2.1 获取元素节点对象
1.使用document.getElementById()引用指定id的结点
// 需求: 点击按钮实现通过id获取p节点以及节点的信息
function getNodeById() {
var pNode = document.getElementById("p");
console.log(pNode);
console.log("nodeName: " + pNode.nodeName + ",nodeValue: "
+ pNode.nodeValue + ",nodeType: " + pNode.nodeType);
}
2. 使用document.getElementsByClassName(“hello”)将所有class属性为”hello”的元素结点放到一个数组中返回
function getNodeByClassName() {
var pNodes = document.getElementsByClassName("hello");
for (var i = 0; i < pNodes.length; i++) {
var pNode = pNodes[i];
console.log(pNode);
console.log("nodeName: " + pNode.nodeName + ",nodeValue: "
+ pNode.nodeValue + ",nodeType: " + pNode.nodeType);
}
}
3. 使用document.getElementsByTagName(“a”),将所有<a>元素结点放到一个数组中返回。
function getNodeByTagName() {
var aNodes = document.getElementsByTagName("a");
for (var i = 0; i < aNodes.length; i++) {
var aNode = aNodes[i];
console.log(aNode);
console.log("nodeName: " + aNode.nodeName + ",nodeValue: "
+ aNode.nodeValue + ",nodeType: " + aNode.nodeType);
}
}
4. 使用document.getElementsByName(“gender”),将所有name属性为”gender”的元素结点放到一个数组中返回。
function getNodeByName() {
var radios = document.getElementsByName("gender");
for (let i = 0; i < radios.length; i++) {
var radio = radios[i];
console.log(radio);
console.log("nodeName: " + radio.nodeName + ",nodeValue: "
+ radio.nodeValue + ",nodeType: " + radio.nodeType);
}
}
2.2 间接获得元素对象
间接引用节点
1.引用子结点
每个结点都有一个childNodes集合属性,类型是数组对象,表示该结点的所有子结点的集合。这些子结点按照它在文档中出现的顺序排列,因此可以通过索引来依次访问各个子结点。
firstChild: 获取第一个子节点
lastChild: 获取最后一个子节点
2.引用父节点
DOM模型中,除了根结点,每个结点都仅有一个父节点,可以用parentNode属性来引用。
3. 引用兄弟结点
element.nextSibling; //引用下一个兄弟结点
element.previousSibling; //引用上一个兄弟结点
如果该结点没有相应的兄弟结点,则属性返回null.
案例: 根据以下HTML结构,实现DOM节点相关操作:
<div id="parent">
<p id="p1">白日依山尽</p>
<p id="p2">黄河入海流</p>
<p id="p3">欲穷千里目</p>
<p id="p4">更上一层楼</p>
</div>
<button onclick="getNodeByParent();">通过父节点获取子节点</button>
<button onclick="">通过子节点获取父节点</button>
<button onclick="">通过节点获取兄弟节点</button>
1. 通过父节点获取子节点
function getNodeByParent() {
// 1. 获取父节点
var parentNode = document.getElementById("parent");
// 2. 通过父节点获取所有子节点
var childNodes = parentNode.childNodes;
console.log("chiledNodes: " + childNodes.length);
console.log("childElementCount: " + parentNode.childElementCount);
// 3. 遍历输出所有的子节点
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
console.log("==> 第" + (i + 1) + "个节点: ")
console.log(childNode); console.log("nodeName: " + childNode.nodeName + ",nodeValue: "
+ childNode.nodeValue + ",nodeType: " + childNode.nodeType);
}
// 4. 获取第一个节点和最后一个节点
console.log(parentNode.firstChild);
console.log(parentNode.lastChild);
console.log(parentNode.firstElementChild);
console.log(parentNode.lastElementChild);
console.log("=======================");
var childNodes = parentNode.children;
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
console.log(childNode);
}
}
2. 通过子节点获取父节点
function getNodeBySon() {
var p2Node = document.getElementById("p2");
// 获取父节点
var parentNode = p2Node.parentNode;
console.log(parentNode);
console.log(p2Node.parentElement);
}
3. 通过某个节点获取兄弟节点
function getNodeByBrother() {
var p2Node = document.getElementById("p2");
// 获取紧邻的下一个节点 console.log(p2Node.nextSibling);
// 获取紧邻的下一个元素节点
console.log(p2Node.nextElementSibling);
// 获取紧邻的上一个节点
console.log(p2Node.previousSibling);
// 获取紧邻的上一个元素节点
console.log(p2Node.previousElementSibling);
}
3. DOM操作元素的属性
元素结点.属性名称(可以读写属性值)
使用setAttritbute(), getAttribute()添加和设置属性
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作属性</title>
<style>
.box2 {
background-color: red;
color: green;
font-size: 24px;
}
</style>
</head>
<body>
<img src="img/a.jpg" id="img">
<div id="div" class="box1">hello</div>
<button onclick="getMyAttribute();">获取节点的属性</button>
<button onclick="setMyAttribute();">设置节点的属性</button>
<script>
function getMyAttribute() {
var imgNode = document.getElementById("img");
// 获取节点属性值
var imgVal = imgNode.getAttribute("src");
var idVal = imgNode.getAttribute("id");
// 输出节点的值
console.log(imgVal);
console.log(idVal);
var divNode = document.getElementById("div");
var classVal = divNode.getAttribute("class");
var idVal = divNode.getAttribute("id");
console.log(classVal);
console.log(idVal);
}
function setMyAttribute() {
var imgNode = document.getElementById("img");
imgNode.setAttribute("src", "img/b.jpg");
var divNode = document.getElementById("div");
divNode.setAttribute("src", "")
div.setAttribute("class", "box2");
}
</script>
</body>
</html>
4. DOM操作元素内容
当标签获得值的时候使用value属性
双标签获得值的时候使用的是innerHTML或者innerText
双标签的特殊情况(value)
Select/textarea
取值的时候使用value属性
赋值的时候使用innerHTML或者innerText即可
要获取一个结点内的文本,一般使用innerHTML属性
innerHTML属性不局限于操作一个结点,而是可以使用HTML片段直接填充页面或直接获取HTML片段,大大提高了开发的灵活性。
InnerText节点的属性:
获取: 获取的是文本,不会获取标签
设置: 都是文本,浏览器不会解析里面包含的html标签
相关代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">
<h1>标签</h1>
</div>
<button onclick="getMyText()">获取元素文本</button>
<button onclick="setMyText()">设置元素文本</button>
<br>
简介: <input type="text" id="desc">
家乡: <select name="city" id="city">
<option value="武汉">武汉</option>
<option value="兰州">兰州</option>
<option value="银川">银川</option>
</select>
<button onclick="getDataFromInputText()">获取表单数据</button>
<script>
function getMyText() {
var divNode = document.getElementById("div1");
console.log(divNode.innerHTML);
console.log(divNode.innerText);
}
function setMyText() {
var divNode = document.getElementById("div1");
// divNode.innerHTML = "<span style='color:red'>HelloWorld</span>";
divNode.innerText = "<span style='color:red'>HelloWorld</span>";
}
function getDataFromInputText() {
var descText = document.getElementById("desc");
console.log(descText.value);
var citySelect = document.getElementById("city");
console.log(citySelect.value);
}
</script>
</body>
</html>
5. DOM操作样式
1.通过style对象改变节点的CSS
利用style对象来控制元素的css, 每个style对象对应为该元素指定的css, 而每个css属性都对应于style对象的属性。
对于单个单词的css属性,在style对象中的属性名称不变,但对于双单词或多单词的属性改写为骆驼写法。例如:css中的font-size对应style属性为fontSize.
2.使用className属性指定结点样式
结点的className属性对应于css中的类选择器。
相关代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>21.DOM对象操作样式</title>
<style>
.box1 {
background-color: blue;
font-size: 30px;
color: red;
}
.box2 {
background-color: red;
font-size: 24px;
font-style: italic;
color: green;
}
</style>
</head>
<body>
<div id="div1">Hello Xyr</div>
<button onclick="onChangeStyle()">节点样式的修改</button>
<script> function onChangeStyle() {
var divNode = document.getElementById("div1");
// 3种方式
// 方式一: 通过className属性、
divNode.className = "box1";
// 方式二: 通过节点的setAttribute方法
divNode.setAttribute("class", "box2");
// 方式三· 通过节点的style属性
divNode.style.backgroundColor = "black";
divNode.style.color = "white";
divNode.style.fontWeight = "700";
divNode.style.fontSize = "24px";
/*
style 属性的修改 和 className 的区别
1 style 的修改是 在元素的行间添加style属性
2.style的修改 需要写很多css的样式 (稍微复杂)
className 修改class 的属性
4. className修改 比 style的简单
*/
}
</script>
</body>
</html>
6. DOM操作节点
使用document.createElement方法创建元素结点
var divElement=document.createElement(“div")
使用appendChild方法添加结点
parentNode.appendChild(childElement);
使用insertBefore方法插入子结点
parentNode.insertBefore(newNode, beforeNode)
使用removeChild方法删除子结点
parentNode.removeChild(childNode);
使用replaceChild方法替换子结点
parentNode.replaceChild(newNode, childNode);
使用cloneNode方法克隆节点,传入true表示深拷贝
node.cloneNode(true);
相关操作代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="ul">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
<div id="div1">
</div>
<button onclick="addNode()">添加节点</button>
<button onclick="addBeforeNode()">在指定元素之前添加节点</button>
<button onclick="replaceNode()">替换节点</button>
<button onclick="removeNode()">删除节点</button>
<button onclick="cloneEleNode()">复制节点</button>
<script>
function addNode() {
// 1. 创建文本节点XXX var textNode = document.createTextNode("XXX");
// 2. 创建li元素节点<li> var liEle = document.createElement("li");
// 3. 将文本节点添加到li节点当中 liEle.appendChild(textNode);
// 4. 获取ul元素节点 var ulEle = document.getElementById("ul");
// 5. 将li元素节点添加到ul节点当中 ulEle.appendChild(liEle);
}
function addBeforeNode() {
// 创建文本节点
var textNdoe = document.createTextNode("ZZZ");
// 创建li元素节点<li>
var liEle = document.createElement("li");
// 将文本节点添加到li节点中
liEle.appendChild(textNdoe);
// 获取ul元素节点
var ulEle = document.getElementById("ul");
// 获取CCC元素节点
var li3Ele = document.getElementsByTagName("li")[2];
// 将li节点插入到CCC节点之前
ulEle.insertBefore(liEle, li3Ele);
}
// 将DDD节点替换成百度链接
function replaceNode() {
// 创建百度文本节点
var bdText = document.createTextNode("百度一下,你就知道!!!");
// 创建超链接元素节点
var aEle = document.createElement("a");
// 将百度文本节点添加到超链接元素节点中
aEle.appendChild(bdText);
// 给超链接节点添加 href 属性
aEle.setAttribute("href", "http://www.baidu.com");
// 获取ul元素节点
var ulEle = document.getElementById("ul");
// 获取DDD元素节点
var li4Ele = document.getElementsByTagName("li")[3];
// 通过ul元素节点将DDD节点替换成超链接元素节点
ulEle.replaceChild(aEle, li4Ele);
}
// 移除AAA节点
function removeNode() {
// 获取AAA节点
var li1Ele = document.getElementsByTagName("li")[0];
// 通过AAA节点获取父节点
var ulEle = li1Ele.parentNode;
// 通过父节点移除子节点AAA
ulEle.removeChild(li1Ele);
}
// 将ul列表复制到div中
function cloneEleNode() {
// 获取ul节点
var ulEle = document.getElementById("ul");
// 获取div节点
var divEle = document.getElementById("div1");
// 将ul节点进行克隆
var cloneNode = ulEle.cloneNode(false);
divEle.appendChild(cloneNode);
}
</script>
</body>
</html>
7. JavaScript操作表单
7.1 获取表单对象的方法
利用表单在文档中的索引或表单的name属性来引用表单
代码如下所示:
<form id="login" action="server/server.html" method="GET" name="loginName">
账号: <input type="text" name="account"><br>
密码: <input type="password" name="password"><br>
<input type="submit">
</form>
<button onclick="getFormNode()">获取表单对象</button>
<button onclick="getFormAttr()">获取表单属性</button>
<script>
// 获取表单对象
function getFormNode() {
// 方式一: 通过id获取表单
var loginForm = document.getElementById("login");
console.log(loginForm);
// 方式二: 通过formName来获取
var loginForm2 = document.loginName;
console.log(loginForm2);
// 方式三: forms属性来获取,拿到文档中所有的form表单,通过下标获取指定的form var loginForm3 = document.forms[0];
console.log(loginForm3);
// 方式四: forms属性来获取,拿到文档中所有的form表单,通过名称获取指定的form var loginForm4 = document.forms['loginName'];
console.log(loginForm4);
}
</script>
7.2 获取表单常用属性
表单常用属性如下表所示:
属性 | 描述 |
action | 返回或者设置action属性 |
elements | 获取一个数组,包括该表单中所有的表单域 |
length | 返回表单的表单域的数量 |
method | 返回或设置表单的method属性 |
name | 返回或设置表单的name属性 |
代码示例如下所示:
// 获取表单属性
function getFormAttr() {
var loginForm = document.getElementById("login");
// 获取表单的action属性
console.log(loginForm.action);
// 获取表单的长度
console.log(loginForm.length);
// 获取表单的method属性
console.log(loginForm.method);
// 获取所有表单域对象,返回的是一个数组
var forms = loginForm.elements;
for(var i = 0; i < forms.length; i++) {
var form = forms[i]; console.log(form);
}
}
运行结果如下图所示:
7.3 表单对象的常用方法
表单常用方法如下表所示:
方法 | 描述 |
submit() | 相当于单击submit按钮,表示表单提交到指定页面 |
reset() | 相当于单击reset按钮,表示所有表单域到初始值 |
代码示例如下所示:
// 提交表单function submitForm() {
var loginForm = document.getElementById("login");
loginForm.submit();
}
// 重置表单function resetForm() {
var loginForm = document.getElementById("login");
loginForm.reset();
}
7.4 form表单的常用事件属性
表单常用事件属性如下表所示:
事件 | 描述 | |
onsubmit | 在表单提交之前触发 | |
onreset | 在表单被重置之前触发 |
注意:
1.表单点击提交会触发onsubmit事件,执行的函数需要给出返回值,返回true表示可以提交数据,返回false,表示不能提交数据
2.其中onsubmit属性的属性值return关键字不能省略,如果省略的 返回结果为false,还会提交数据和页面跳转。
3.reset表示重置到初始的状态,而不是清空。
7.5 form中表单域对象的获取
可以通过如下三种方式获取:
代码示例如下所示:
function getFormField() {
// 通过id获取表单域
var accountNode = document.getElementById("accountId");
console.log(accountNode);
// 通过表单的name来获取
var loginForm = document.getElementById("login");
var accountNode2 = loginForm.account;
console.log(accountNode2);
// form.elements[i]; 表单的元素下标来获取
var accountNode3 = loginForm.elements[0]''
console.log(accountNode3);
}
7.5 form表单域组件常用属性和方法.
disabled :使表单域不能接受用户的操作,变为只读
readonly: 内容不可以更改,变为只读
name :获取或设置表单域的名称
form:获取该表单域所属的表单
value:获取或设置表单域的值
type :判断表单域的类型
focus():使表单域获得焦点
blur():使表单域失去焦点
注意:
1. 设置readonly属性的时候only首字母需要大写才能生效
2. 一个页面只能够有一个组件设置为获得焦点
3. blur方法常用于在失去焦点时进行表单校验,部分代码如下所示:
<form id="login" action="server/server.html" method="GET" name="loginName">
账号: <input id="accountId" type="text" name="account"
onblur="checkAccount()"><span id="msg"> </span><br>
密码: <input id="pwdId" type="password" name="pwd"><br>
<input type="submit">
</form>
<script>
function checkAccount() {
var accountNode = document.getElementById("accountId");
var msgNode = document.getElementById("msg");
var msg = accountNode.value;
if (msg != null && msg.length > 0) {
msgNode.innerText = "√ 账号合法";
msgNode.style.color = "green";
} else {
msgNode.innerText = "× 账号不能为空";
msgNode.style.color = "red";
}
}
</script>
readonly和disabled的区别?
共同点:都是导致内容不可以更改
区别:
readonly:中的内容是可以提交的
disabled:数据是不可以提交的,不可以在被操作
代码示例如下所示:
<body> <form id="login" action="server/server.html" method="GET" name="loginName"><span id="msg"></span><br>
账号: <input id="accountId" type="text" name="account"><br>
密码: <input id="pwdId" type="password" name="pwd"><br>
<input type="submit">
</form>
<button onclick="getInputFields()">表单域的常用属性设置</button>
<script>
function getInputValue() {
var accountNode = document.getElementById("accountId");
console.log(accountNode.value);
// accountNode.disabled = true;
// accountNode.readOnly = true;
console.log(accountNode.name);
console.log(accountNode.form);
console.log(accountNode.type);
accountNode.focus();
}
</script>
</body>
7.6 单选按钮组和复选框常用操作
通过checked属性获得选中和未选中的状态。
获得单选按钮组的值:只能通过遍历单选按钮来获取被选中的值
复选框的处理类似单选按钮
获取所有单选按钮或者复选按钮对象使用getElementByName("name")
使用复选按钮实现全选和反选效果图如下所示:
代码示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作单选和复选按钮</title>
</head>
<body>
性别: <input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女<br>
<button onclick="getRadioValues()">获取单选框的值</button>
<hr>
<br> 爱好: <input id="swimming" type="checkbox" name="hobby" value="swimming"><label for="swimming">游泳</label>
<input id="football" type="checkbox" name="hobby" value="football"><label for="football">足球</label>
<input id="basketball" type="checkbox" name="hobby" value="basketball"><label for="basketball">篮球</label>
<input id="coding" type="checkbox" name="hobby" value="coding"><label for="coding">写代码</label> <br>
<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选<br>
<button onclick="getCheckBoxValues()">获取多选框的值</button>
<button onclick="getCheckBoxValues()">多选框全选操作</button>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectOther()">反选</button>
<hr>
<script> function getRadioValues() {
var radios = document.getElementsByName("gender");
for(var i = 0; i < radios.length; i++) {
var radioNode = radios[i];
if (radioNode.checked == true) {
console.log(radioNode.value);
}
}
}
function getCheckBoxValues() {
var hobbys = document.getElementsByName("hobby");
for(var i = 0; i < hobbys.length; i++) {
var checkboxNode = hobbys[i];
if(checkboxNode.checked == true) {
console.log(checkboxNode.value);
}
}
}
//实现全选和全不选
function selAllNo() {
/*
得到上面那个复选框
- 通过id获取到
判断这个复选框是否是选中
- if条件,checked==true
如果是选中,下面是全选
4、如果不是选中,下面是全不选
*/
//得到上面复选框
var box1 = document.getElementById("boxid");
//判断这个复选框是否是选择
if(box1.checked == true) { //是选择状态
//调用全选方法
selectAll();
} else { //不是选中状态
//调用全不选方法
selectNone();
}
}
//实现反选的操作
function selectOther() {
/*
获取到要操作的复选框
返回数组,遍历数组
3、得到每一个复选框
4、判断当前的复选框是选中还是不选中
- if(love1.checked == true) {}
5、如果选中,属性checked设置成false,否则,设置成true
*/
//获取要操作的复选框
var hobbys = document.getElementsByName("hobby");
//遍历数组
for (var i = 0; i < hobbys.length; i++) {
//得到每一个复选框
var checkboxNode = hobbys[i];
//判断当前这个复选框是什么状态
if (checkboxNode.checked == true) { //是选中的状态
//设置checked=false
checkboxNode.checked = false;
} else { //是不选中的状态
//把checked=true
checkboxNode.checked = true;
}
}
}
//实现全不选的操作
function selectNone() {
/*
1、获取到要操作的复选框
2、返回的是数组,遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
*/
//得到要操作的复选框
var hobbys = document.getElementsByName("hobby");
//遍历数组
for (var i = 0; i < hobbys.length; i++) {
//得到每一个复选框
var checkboxNode = hobbys[i];
//设置属性的值checked = false;
checkboxNode.checked = false;
}
}
//实现全选的操作
function selectAll() {
/*
获取要操作的复选框
- 使用getElementsByName()
2、返回是数组,
- 属性 checked判断复选框是否选中
*** checked = true; //表示选中
*** checked = false;//表示不选中
- 遍历数组,得到的是每一个checkbox
* 把每一个checkbox属性checked=true
*/
//获取要操作的复选框
var hobbys = document.getElementsByName("hobby");
//遍历数组,得到每一个复选框
for (var i = 0; i < hobbys.length; i++) {
var checkboxNode = hobbys[i];
//得到每一个复选框
//设置属性是true
checkboxNode.checked = true;
}
}
</script>
</body>
</html>
7.7 下拉列表的使用
常用属性的使用
使用value属性获取和设置下拉列表选中选项的值
使用selectedIndex属性获取当前被选中选项的索引
使用options属性获取所有选项集合
使用option对象的value属性和text属性, 可以读写这两个属性。
使用option对象的selected属性选中该option
示例代码如下所示:
*请认真填写需求信息,我们会在24小时内与您取得联系。