整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript数组填充fill函数

JavaScript数组填充fill函数

大家使用数组估计最让人厌烦的就是对数组进行赋初值,要不就是手动的进行赋值要不就是使用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属性一般给层叠样式用表。比如:

  1. .news表示class=news的元素增加样式

  2. news表示class=news的<div>元素增加样式

  3. .news title表示class=news下的class=title的<div>元素

  • ID选择器:给标记特定ID属性的HTML元素来增加样式。\

  1. Id选择器的定义,以“#”号开头

  2. 网页不能出现同一个ID的值,ID像身份证号,具有唯一性;

  3. HTML元素的ID属性,一般给JavaScript使用

第二:组合选择器

  • 多元素选择器:也就是同时给多个HTML元素定义。

  1. body,p,a,ul,li,p{margin:0px;padding:0px;}

  2. 每一个HTML元素都具有默认样式。

  • 后代元素选择器:用空格来分隔各个选择器。

  1. .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);

2.CSS背景属性

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; //多个属性值间用“空格”隔开

3.CSS浮动和清除

Float:元素浮动,取值:left或right。

Clear:清除浮动,取值:left或right或both

CSS浮动元素将向左向右浮动;

浮动可以叫“飘”起来;

浮动的元素,直到碰到父元素的边框或前一个浮动元素的边框为止;

浮动元素是一个块元素框,不管它原来是什么元素(行内元素);

浮动元素不再占用空间脱离了普通文档流,层级比普通元素的级别高;

清除浮动

  • 清除浮动特性后,清除元素之后的其它元素将恢复默认排版;

  • 清除浮动特性后,包围元素从视觉上看起来,像包围住了浮动元素;

4.CSS边框属性

Border:同时设置四个边框的属性

Border-left:设置左边框的属性

Border-right:设置右边框的属性

Border-top:设置顶边框的属性

Border-bottom:设置底边框的属性

格式:border-bottom:粗细 线型 线颜色;

举例:border-bottom:2px solid #FF0000; //元素的下边线为2px粗的实线,颜色为红色

线型取值:none(无边线)、solid(实线)、dashed(虚线)、dotted(点状线)、double(双线)

5.“盒子”模型

每一个HTML元素可以看成一个“盒子”。

一个“盒子”具有:宽度、边框、内填充、外边距

宽度(width)和高度(height):是指内容的宽度和高度,不含边框、外边距、内填充。

内填充(padding):是指内容到边框线间的距离,含四个方向:上、右、下、左

外边距(margin):是指边框线以外的距离。

计算一个“盒子”的总空度

假设:总宽度为100px,边框为1px,内填充为10px,求内容的宽度

Width=100px – 1px*2 -10px*2=78px

假设:总宽度为100px,内容的宽50px,求左右内填充分别是多少?

Padding-left=(100px – 50px )/2=25px

6.CSS内填充padding

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; //表示:上右下左分别设置不同的内填充,顺序不可乱

7.CSS外边距margin

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; //分别设置四外外边距,顺序为“上右下左

8.综合案例:PHP首页

一、首先要确定的事情

主页的宽度: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属性来引用表单

  1. docuemnt.getElementById 通过id获取表单对象
  2. document.formName 通过document对象的表单name属性获取表单对象
  3. document.forms[i] 通过文档的foms属性得到所有的表单对象,返回表单的数组,通过索引获取对应的表单对象
  4. document.forms[formName] 通过文档的foms属性得到所有的表单对象,返回表单的数组,通过表单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中表单域对象的获取

可以通过如下三种方式获取:

  1. 通过id获取表单域
  2. 通过表单的name来获取
  3. form.elements[i]; 表单的元素下标来获取

代码示例如下所示:

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

示例代码如下所示: