整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
大家使用數(shù)組估計最讓人厭煩的就是對數(shù)組進(jìn)行賦初值，要不就是手動的進(jìn)行賦值要不就是使用for循環(huán)進(jìn)行賦值。在ES6中可以使用fill方法進(jìn)行數(shù)組的初始化。fill方法接收3個參數(shù)，第一個參數(shù)是賦值的值為必要參數(shù)，第二個參數(shù)是賦值開始的起始位置，第3個參數(shù)是賦值開始的終止位置此位置不會進(jìn)行賦值。
當(dāng)只有第1個參數(shù)是默認(rèn)設(shè)置數(shù)組的所有值為參數(shù)1的值。
當(dāng)只有第1,2兩個參數(shù)值設(shè)置從第2個值的位置到數(shù)組的末尾使用參數(shù)1的值進(jìn)行賦值。
同時還需要注意的是不能對超出數(shù)組長度的值進(jìn)行賦值。
請看下面的演示程序。
<!DOCTYPE html>
<html>
<head>
<title>數(shù)組的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>輸出結(jié)果為：
從結(jié)果上我們可以看到上述的結(jié)論。但是使用fill對數(shù)組進(jìn)行賦值還是有一些局限性的，只能賦值一部分的位置的值為一個相同的值。
CSS的介紹
CSS，Cascading Style Sheets層疊樣式表。
一個網(wǎng)頁由三個部分：結(jié)構(gòu)、表現(xiàn)、行為，對應(yīng)的標(biāo)準(zhǔn)是：XHTML、CSS、JavaScript。
這三個標(biāo)準(zhǔn)語言，是瀏覽器直接可以識別的，并且能直接進(jìn)行解釋(翻譯)的。
CSS的格式
一個CSS樣式表(<style></style>)由多個CSS規(guī)則構(gòu)成；
一個CSS規(guī)則由“選擇器”和{}構(gòu)成；
選擇器就是給哪一個HTML元素定義；
CSS選擇器
第一：基本選擇器（單一）
通用選擇器(*)：將匹配所有的HTML元素；
標(biāo)簽選擇器：對應(yīng)所有的HTML標(biāo)記，名稱與標(biāo)記名稱一樣。
類選擇器：可以通過給一類HTML元素，定義同一個class屬性來增加樣式。類樣式定義以“.”開頭定義。CSS的CLASS屬性一般給層疊樣式用表。比如：
.news表示class=news的元素增加樣式
news表示class=news的<div>元素增加樣式
.news title表示class=news下的class=title的<div>元素
ID選擇器：給標(biāo)記特定ID屬性的HTML元素來增加樣式。\
Id選擇器的定義，以“#”號開頭
網(wǎng)頁不能出現(xiàn)同一個ID的值，ID像身份證號，具有唯一性；
HTML元素的ID屬性，一般給JavaScript使用
第二：組合選擇器
多元素選擇器：也就是同時給多個HTML元素定義。
body,p,a,ul,li,p{margin:0px;padding:0px;}
每一個HTML元素都具有默認(rèn)樣式。
后代元素選擇器：用空格來分隔各個選擇器。
.news .title p{background-color:#FF0000;}
子元素選擇器：用>號來分隔父子選擇器，不存在第三層級的問題。
第三：偽類選擇器
偽類選擇器一般是給超鏈接<a>標(biāo)記來增加樣式。
超鏈接具有四個狀態(tài)：
正常狀態(tài) a:link{ }
放上狀態(tài) a:hover{ }
激活狀態(tài)a:active{ }
訪問過狀態(tài) 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內(nèi)部元素將繼承外部元素的樣式，多個外層元素的樣式就疊加到內(nèi)層元素上。<body>元素是網(wǎng)頁中最大的標(biāo)記，它中的樣式將被其它子元素繼承。
哪些CSS屬性能被繼承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等
引入CSS的方式
（1）內(nèi)嵌式
通過<style></style>來書寫CSS代碼。
只能應(yīng)用于當(dāng)前網(wǎng)頁，不能被其它網(wǎng)頁共享。
注意：<style>標(biāo)記可以放在網(wǎng)頁的任何地方，但一般放在<head>。
（2）外聯(lián)式
通過<link>標(biāo)記來引入外部的CSS文件(.css)。
可以被其它網(wǎng)頁共享。public.css index.css news.css about.css
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>標(biāo)記只能放在<head>中
（3）行內(nèi)樣式
通過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：首行縮進(jìn)
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浮動元素將向左向右浮動；
浮動可以叫“飄”起來；
浮動的元素，直到碰到父元素的邊框或前一個浮動元素的邊框為止；
浮動元素是一個塊元素框，不管它原來是什么元素(行內(nèi)元素)；
浮動元素不再占用空間，脫離了普通文檔流，層級比普通元素的級別高；
清除浮動
清除浮動特性后，清除元素之后的其它元素將恢復(fù)默認(rèn)排版；
清除浮動特性后，包圍元素從視覺上看起來，像包圍住了浮動元素；
Border：同時設(shè)置四個邊框的屬性
Border-left：設(shè)置左邊框的屬性
Border-right：設(shè)置右邊框的屬性
Border-top：設(shè)置頂邊框的屬性
Border-bottom：設(shè)置底邊框的屬性
格式：border-bottom：粗細(xì) 線型 線顏色;
舉例：border-bottom：2px solid #FF0000; //元素的下邊線為2px粗的實線，顏色為紅色
線型取值：none(無邊線)、solid(實線)、dashed(虛線)、dotted(點狀線)、double(雙線)
每一個HTML元素可以看成一個“盒子”。
一個“盒子”具有：寬度、邊框、內(nèi)填充、外邊距
寬度(width)和高度(height)：是指內(nèi)容的寬度和高度，不含邊框、外邊距、內(nèi)填充。
內(nèi)填充(padding)：是指內(nèi)容到邊框線間的距離，含四個方向：上、右、下、左
外邊距(margin)：是指邊框線以外的距離。
計算一個“盒子”的總空度
假設(shè)：總寬度為100px，邊框為1px，內(nèi)填充為10px，求內(nèi)容的寬度
Width=100px – 1px*2 -10px*2=78px
假設(shè)：總寬度為100px，內(nèi)容的寬50px，求左右內(nèi)填充分別是多少？
Padding-left=(100px – 50px )/2=25px
Padding-left：左邊線到內(nèi)容間的距離
Padding-right：右邊線到內(nèi)容間的距離
Padding-top：頂邊線到內(nèi)容間的距離
Padding-bottom：底邊線到內(nèi)容間的距離
Padding：同時設(shè)置四個邊的內(nèi)填充距離
padding:10px; //表示：上下左右四個內(nèi)填充都是10px
padding:5px 10px; //表示：上下為5px，左右為10px
padding:5px 10px 15px; //表示：上為5px，左右為10px，下為15px
padding:5px 10px 15px 20px; //表示：上右下左分別設(shè)置不同的內(nèi)填充，順序不可亂
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; //分別設(shè)置四外外邊距，順序為“上右下左”
一、首先要確定的事情
主頁的寬度：973px
主頁的背景色、背景圖片
網(wǎng)頁的結(jié)構(gòu)：網(wǎng)頁頭部、網(wǎng)頁尾部、網(wǎng)頁主要內(nèi)容（左右兩列）
二、網(wǎng)頁結(jié)構(gòu)圖
. DOM對象認(rèn)識
1.1 什么是DOM對象
DOM模型的全稱是：Document Object Model, 即：文檔對象模型，它定義了操作文檔對象的接口。
WEB頁面的HTML文檔，document就是根節(jié)點，其它的子對象就是子結(jié)點.
DOM模型在AJAX開發(fā)中的作用
在ajax中，DOM模型其實是最核心的結(jié)構(gòu)，是所有ajax開發(fā)的基礎(chǔ)架構(gòu)．如果沒有DOM模型，就沒有辦法在客戶端改變頁面的內(nèi)容，所有的局部刷新，異步請求也就無從實現(xiàn)。熟練掌握DOM模型的相關(guān)技術(shù)，才算真正掌握了ajax開發(fā)精髓。
1.2 瀏覽器裝載和顯示頁面的過程
1. 下載源代碼
2. 通過頁面源代碼加載相關(guān)內(nèi)容到內(nèi)存，也就是根據(jù)HTML源碼在內(nèi)存中構(gòu)建相關(guān)DOM對象。
3. 根據(jù)DOM對象的相關(guān)屬性，來進(jìn)行顯示。
1.3 DOM節(jié)點分類node
1.3.1 節(jié)點的概念
在DOM模型中，整個文檔就是由層次不同的多個節(jié)點組成，可以說結(jié)點代表了全部內(nèi)容。
1.3.2 節(jié)點的類型
元素結(jié)點、文本結(jié)點和屬性結(jié)點
<font id=“font1” color=“red”>hello DOM!</font>文本節(jié)點和屬性結(jié)點都看作元素結(jié)點的子結(jié)點
我們一般所說的結(jié)點指的就是元素結(jié)點。
1.3.3 節(jié)點的基本屬性
nodeName:元素結(jié)點返回結(jié)點類型(即，標(biāo)記名稱)；屬性結(jié)點返回屬性名稱，文本節(jié)點返回"#text".
nodeType:元素節(jié)點返回1，屬性節(jié)點返回2，文本節(jié)點返回3
nodeValue:元素節(jié)點返回null, 屬性節(jié)點返回屬性值, 文本結(jié)點返回文本值。
1.4 DOM節(jié)點關(guān)系
瀏覽器在解析文檔之前會將文檔讀取到內(nèi)存形成DOM樹，樹形節(jié)點存在相關(guān)層級關(guān)系，常用關(guān)系如下所示：
根節(jié)點(root): 所有節(jié)點的頂層節(jié)點
父子節(jié)點（parent-child）：<html> 元素作為父級，<head> 和 <body> 元素作為子級
兄弟節(jié)點（Sibling）:<a> 和 <h1> 元素就是兄弟關(guān)系;<title> 和 <h1> 元素并不是兄弟關(guān)系
葉子節(jié)點: 沒有任何子節(jié)點的節(jié)點
空節(jié)點: 沒有任何內(nèi)容的節(jié)點
2. DOM對象的獲取
2.1 獲取元素節(jié)點對象
1.使用document.getElementById()引用指定id的結(jié)點
// 需求: 點擊按鈕實現(xiàn)通過id獲取p節(jié)點以及節(jié)點的信息
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”的元素結(jié)點放到一個數(shù)組中返回
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>元素結(jié)點放到一個數(shù)組中返回。
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”的元素結(jié)點放到一個數(shù)組中返回。
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 間接獲得元素對象
間接引用節(jié)點
1.引用子結(jié)點
每個結(jié)點都有一個childNodes集合屬性，類型是數(shù)組對象，表示該結(jié)點的所有子結(jié)點的集合。這些子結(jié)點按照它在文檔中出現(xiàn)的順序排列，因此可以通過索引來依次訪問各個子結(jié)點。
firstChild: 獲取第一個子節(jié)點
lastChild: 獲取最后一個子節(jié)點
2.引用父節(jié)點
DOM模型中，除了根結(jié)點，每個結(jié)點都僅有一個父節(jié)點，可以用parentNode屬性來引用。
3. 引用兄弟結(jié)點
element.nextSibling; //引用下一個兄弟結(jié)點
element.previousSibling; //引用上一個兄弟結(jié)點
如果該結(jié)點沒有相應(yīng)的兄弟結(jié)點，則屬性返回null.
案例: 根據(jù)以下HTML結(jié)構(gòu)，實現(xiàn)DOM節(jié)點相關(guān)操作：
<div id="parent">
<p id="p1">白日依山盡</p>
<p id="p2">黃河入海流</p>
<p id="p3">欲窮千里目</p>
<p id="p4">更上一層樓</p>
</div>
<button onclick="getNodeByParent();">通過父節(jié)點獲取子節(jié)點</button>
<button onclick="">通過子節(jié)點獲取父節(jié)點</button>
<button onclick="">通過節(jié)點獲取兄弟節(jié)點</button>1. 通過父節(jié)點獲取子節(jié)點
function getNodeByParent() {
// 1. 獲取父節(jié)點
var parentNode = document.getElementById("parent");
// 2. 通過父節(jié)點獲取所有子節(jié)點
var childNodes = parentNode.childNodes;
console.log("chiledNodes: " + childNodes.length);
console.log("childElementCount: " + parentNode.childElementCount);
// 3. 遍歷輸出所有的子節(jié)點
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
console.log("==> 第" + (i + 1) + "個節(jié)點: ")
console.log(childNode); console.log("nodeName: " + childNode.nodeName + ",nodeValue: "
+ childNode.nodeValue + ",nodeType: " + childNode.nodeType);
}
// 4. 獲取第一個節(jié)點和最后一個節(jié)點
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. 通過子節(jié)點獲取父節(jié)點
function getNodeBySon() {
var p2Node = document.getElementById("p2");
// 獲取父節(jié)點
var parentNode = p2Node.parentNode;
console.log(parentNode);
console.log(p2Node.parentElement);
}3. 通過某個節(jié)點獲取兄弟節(jié)點
function getNodeByBrother() {
var p2Node = document.getElementById("p2");
// 獲取緊鄰的下一個節(jié)點 console.log(p2Node.nextSibling);
// 獲取緊鄰的下一個元素節(jié)點
console.log(p2Node.nextElementSibling);
// 獲取緊鄰的上一個節(jié)點
console.log(p2Node.previousSibling);
// 獲取緊鄰的上一個元素節(jié)點
console.log(p2Node.previousElementSibling);
}3. DOM操作元素的屬性
元素結(jié)點.屬性名稱（可以讀寫屬性值）
使用setAttritbute(), getAttribute()添加和設(shè)置屬性
代碼示例如下：
<!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();">獲取節(jié)點的屬性</button>
<button onclick="setMyAttribute();">設(shè)置節(jié)點的屬性</button>
<script>
function getMyAttribute() {
var imgNode = document.getElementById("img");
// 獲取節(jié)點屬性值
var imgVal = imgNode.getAttribute("src");
var idVal = imgNode.getAttribute("id");
// 輸出節(jié)點的值
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操作元素內(nèi)容
當(dāng)標(biāo)簽獲得值的時候使用value屬性
雙標(biāo)簽獲得值的時候使用的是innerHTML或者innerText
雙標(biāo)簽的特殊情況(value)
Select/textarea
取值的時候使用value屬性
賦值的時候使用innerHTML或者innerText即可
要獲取一個結(jié)點內(nèi)的文本，一般使用innerHTML屬性
innerHTML屬性不局限于操作一個結(jié)點，而是可以使用HTML片段直接填充頁面或直接獲取HTML片段，大大提高了開發(fā)的靈活性。
InnerText節(jié)點的屬性:
獲取: 獲取的是文本,不會獲取標(biāo)簽
設(shè)置: 都是文本，瀏覽器不會解析里面包含的html標(biāo)簽
相關(guān)代碼如下所示:
<!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>標(biāo)簽</h1>
</div>
<button onclick="getMyText()">獲取元素文本</button>
<button onclick="setMyText()">設(shè)置元素文本</button>
<br>
簡介: <input type="text" id="desc">
家鄉(xiāng): <select name="city" id="city">
<option value="武漢">武漢</option>
<option value="蘭州">蘭州</option>
<option value="銀川">銀川</option>
</select>
<button onclick="getDataFromInputText()">獲取表單數(shù)據(jù)</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對象改變節(jié)點的CSS
利用style對象來控制元素的css, 每個style對象對應(yīng)為該元素指定的css, 而每個css屬性都對應(yīng)于style對象的屬性。
對于單個單詞的css屬性，在style對象中的屬性名稱不變，但對于雙單詞或多單詞的屬性改寫為駱駝寫法。例如：css中的font-size對應(yīng)style屬性為fontSize.
2.使用className屬性指定結(jié)點樣式
結(jié)點的className屬性對應(yīng)于css中的類選擇器。
相關(guān)代碼如下所示：
<!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()">節(jié)點樣式的修改</button>
<script> function onChangeStyle() {
var divNode = document.getElementById("div1");
// 3種方式
// 方式一: 通過className屬性、
divNode.className = "box1";
// 方式二: 通過節(jié)點的setAttribute方法
divNode.setAttribute("class", "box2");
// 方式三· 通過節(jié)點的style屬性
divNode.style.backgroundColor = "black";
divNode.style.color = "white";
divNode.style.fontWeight = "700";
divNode.style.fontSize = "24px";
/*
style 屬性的修改 和 className 的區(qū)別
1 style 的修改是 在元素的行間添加style屬性
2.style的修改 需要寫很多css的樣式 (稍微復(fù)雜)
className 修改class 的屬性
4. className修改 比 style的簡單
*/
}
</script>
</body>
</html>6. DOM操作節(jié)點
使用document.createElement方法創(chuàng)建元素結(jié)點
var divElement=document.createElement(“div")
使用appendChild方法添加結(jié)點
parentNode.appendChild(childElement);
使用insertBefore方法插入子結(jié)點
parentNode.insertBefore(newNode, beforeNode)
使用removeChild方法刪除子結(jié)點
parentNode.removeChild(childNode);
使用replaceChild方法替換子結(jié)點
parentNode.replaceChild(newNode, childNode);
使用cloneNode方法克隆節(jié)點,傳入true表示深拷貝
node.cloneNode(true);
相關(guān)操作代碼如下所示:
<!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()">添加節(jié)點</button>
<button onclick="addBeforeNode()">在指定元素之前添加節(jié)點</button>
<button onclick="replaceNode()">替換節(jié)點</button>
<button onclick="removeNode()">刪除節(jié)點</button>
<button onclick="cloneEleNode()">復(fù)制節(jié)點</button>
<script>
function addNode() {
// 1. 創(chuàng)建文本節(jié)點XXX var textNode = document.createTextNode("XXX");
// 2. 創(chuàng)建li元素節(jié)點<li> var liEle = document.createElement("li");
// 3. 將文本節(jié)點添加到li節(jié)點當(dāng)中 liEle.appendChild(textNode);
// 4. 獲取ul元素節(jié)點 var ulEle = document.getElementById("ul");
// 5. 將li元素節(jié)點添加到ul節(jié)點當(dāng)中 ulEle.appendChild(liEle);
}
function addBeforeNode() {
// 創(chuàng)建文本節(jié)點
var textNdoe = document.createTextNode("ZZZ");
// 創(chuàng)建li元素節(jié)點<li>
var liEle = document.createElement("li");
// 將文本節(jié)點添加到li節(jié)點中
liEle.appendChild(textNdoe);
// 獲取ul元素節(jié)點
var ulEle = document.getElementById("ul");
// 獲取CCC元素節(jié)點
var li3Ele = document.getElementsByTagName("li")[2];
// 將li節(jié)點插入到CCC節(jié)點之前
ulEle.insertBefore(liEle, li3Ele);
}
// 將DDD節(jié)點替換成百度鏈接
function replaceNode() {
// 創(chuàng)建百度文本節(jié)點
var bdText = document.createTextNode("百度一下,你就知道!!!");
// 創(chuàng)建超鏈接元素節(jié)點
var aEle = document.createElement("a");
// 將百度文本節(jié)點添加到超鏈接元素節(jié)點中
aEle.appendChild(bdText);
// 給超鏈接節(jié)點添加 href 屬性
aEle.setAttribute("href", "http://www.baidu.com");
// 獲取ul元素節(jié)點
var ulEle = document.getElementById("ul");
// 獲取DDD元素節(jié)點
var li4Ele = document.getElementsByTagName("li")[3];
// 通過ul元素節(jié)點將DDD節(jié)點替換成超鏈接元素節(jié)點
ulEle.replaceChild(aEle, li4Ele);
}
// 移除AAA節(jié)點
function removeNode() {
// 獲取AAA節(jié)點
var li1Ele = document.getElementsByTagName("li")[0];
// 通過AAA節(jié)點獲取父節(jié)點
var ulEle = li1Ele.parentNode;
// 通過父節(jié)點移除子節(jié)點AAA
ulEle.removeChild(li1Ele);
}
// 將ul列表復(fù)制到div中
function cloneEleNode() {
// 獲取ul節(jié)點
var ulEle = document.getElementById("ul");
// 獲取div節(jié)點
var divEle = document.getElementById("div1");
// 將ul節(jié)點進(jìn)行克隆
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表單，通過下標(biāo)獲取指定的form var loginForm3 = document.forms[0];
console.log(loginForm3);
// 方式四: forms屬性來獲取，拿到文檔中所有的form表單，通過名稱獲取指定的form var loginForm4 = document.forms['loginName'];
console.log(loginForm4);
}
</script>7.2 獲取表單常用屬性
表單常用屬性如下表所示:
屬性 | 描述 |
action | 返回或者設(shè)置action屬性 |
elements | 獲取一個數(shù)組，包括該表單中所有的表單域 |
length | 返回表單的表單域的數(shù)量 |
method | 返回或設(shè)置表單的method屬性 |
name | 返回或設(shè)置表單的name屬性 |
代碼示例如下所示:
// 獲取表單屬性
function getFormAttr() {
var loginForm = document.getElementById("login");
// 獲取表單的action屬性
console.log(loginForm.action);
// 獲取表單的長度
console.log(loginForm.length);
// 獲取表單的method屬性
console.log(loginForm.method);
// 獲取所有表單域?qū)ο螅祷氐氖且粋€數(shù)組
var forms = loginForm.elements;
for(var i = 0; i < forms.length; i++) {
var form = forms[i]; console.log(form);
}
}運行結(jié)果如下圖所示:
7.3 表單對象的常用方法
表單常用方法如下表所示:
方法 | 描述 |
submit() | 相當(dāng)于單擊submit按鈕，表示表單提交到指定頁面 |
reset() | 相當(dāng)于單擊reset按鈕，表示所有表單域到初始值 |
代碼示例如下所示:
// 提交表單function submitForm() {
var loginForm = document.getElementById("login");
loginForm.submit();
}
// 重置表單function resetForm() {
var loginForm = document.getElementById("login");
loginForm.reset();
}7.4 form表單的常用事件屬性
表單常用事件屬性如下表所示:
事件 | 描述 | |
onsubmit | 在表單提交之前觸發(fā) | |
onreset | 在表單被重置之前觸發(fā) | |
注意:
1.表單點擊提交會觸發(fā)onsubmit事件，執(zhí)行的函數(shù)需要給出返回值，返回true表示可以提交數(shù)據(jù)，返回false，表示不能提交數(shù)據(jù)
2.其中onsubmit屬性的屬性值return關(guān)鍵字不能省略，如果省略的 返回結(jié)果為false，還會提交數(shù)據(jù)和頁面跳轉(zhuǎn)。
3.reset表示重置到初始的狀態(tài)，而不是清空。
7.5 form中表單域?qū)ο蟮墨@取
可以通過如下三種方式獲取:
代碼示例如下所示:
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]; 表單的元素下標(biāo)來獲取
var accountNode3 = loginForm.elements[0]''
console.log(accountNode3);
}7.5 form表單域組件常用屬性和方法.
disabled ：使表單域不能接受用戶的操作，變?yōu)橹蛔x
readonly: 內(nèi)容不可以更改，變?yōu)橹蛔x
name ：獲取或設(shè)置表單域的名稱
form：獲取該表單域所屬的表單
value：獲取或設(shè)置表單域的值
type ：判斷表單域的類型
focus():使表單域獲得焦點
blur()：使表單域失去焦點
注意:
1. 設(shè)置readonly屬性的時候only首字母需要大寫才能生效
2. 一個頁面只能夠有一個組件設(shè)置為獲得焦點
3. blur方法常用于在失去焦點時進(jìn)行表單校驗，部分代碼如下所示：
<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的區(qū)別?
共同點：都是導(dǎo)致內(nèi)容不可以更改
區(qū)別：
readonly：中的內(nèi)容是可以提交的
disabled：數(shù)據(jù)是不可以提交的,不可以在被操作
代碼示例如下所示:
<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()">表單域的常用屬性設(shè)置</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 單選按鈕組和復(fù)選框常用操作
通過checked屬性獲得選中和未選中的狀態(tài)。
獲得單選按鈕組的值：只能通過遍歷單選按鈕來獲取被選中的值
復(fù)選框的處理類似單選按鈕
獲取所有單選按鈕或者復(fù)選按鈕對象使用getElementByName("name")
使用復(fù)選按鈕實現(xiàn)全選和反選效果圖如下所示:
代碼示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作單選和復(fù)選按鈕</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);
}
}
}
//實現(xiàn)全選和全不選
function selAllNo() {
/*
得到上面那個復(fù)選框
- 通過id獲取到
判斷這個復(fù)選框是否是選中
- if條件，checked==true
如果是選中，下面是全選
4、如果不是選中，下面是全不選
*/
//得到上面復(fù)選框
var box1 = document.getElementById("boxid");
//判斷這個復(fù)選框是否是選擇
if(box1.checked == true) { //是選擇狀態(tài)
//調(diào)用全選方法
selectAll();
} else { //不是選中狀態(tài)
//調(diào)用全不選方法
selectNone();
}
}
//實現(xiàn)反選的操作
function selectOther() {
/*
獲取到要操作的復(fù)選框
返回數(shù)組，遍歷數(shù)組
3、得到每一個復(fù)選框
4、判斷當(dāng)前的復(fù)選框是選中還是不選中
- if(love1.checked == true) {}
5、如果選中，屬性checked設(shè)置成false，否則，設(shè)置成true
*/
//獲取要操作的復(fù)選框
var hobbys = document.getElementsByName("hobby");
//遍歷數(shù)組
for (var i = 0; i < hobbys.length; i++) {
//得到每一個復(fù)選框
var checkboxNode = hobbys[i];
//判斷當(dāng)前這個復(fù)選框是什么狀態(tài)
if (checkboxNode.checked == true) { //是選中的狀態(tài)
//設(shè)置checked=false
checkboxNode.checked = false;
} else { //是不選中的狀態(tài)
//把checked=true
checkboxNode.checked = true;
}
}
}
//實現(xiàn)全不選的操作
function selectNone() {
/*
1、獲取到要操作的復(fù)選框
2、返回的是數(shù)組，遍歷數(shù)組
3、得到每一個復(fù)選框
4、設(shè)置復(fù)選框的屬性 checked=false
*/
//得到要操作的復(fù)選框
var hobbys = document.getElementsByName("hobby");
//遍歷數(shù)組
for (var i = 0; i < hobbys.length; i++) {
//得到每一個復(fù)選框
var checkboxNode = hobbys[i];
//設(shè)置屬性的值checked = false;
checkboxNode.checked = false;
}
}
//實現(xiàn)全選的操作
function selectAll() {
/*
獲取要操作的復(fù)選框
- 使用getElementsByName()
2、返回是數(shù)組，
- 屬性 checked判斷復(fù)選框是否選中
*** checked = true; //表示選中
*** checked = false;//表示不選中
- 遍歷數(shù)組，得到的是每一個checkbox
* 把每一個checkbox屬性checked=true
*/
//獲取要操作的復(fù)選框
var hobbys = document.getElementsByName("hobby");
//遍歷數(shù)組，得到每一個復(fù)選框
for (var i = 0; i < hobbys.length; i++) {
var checkboxNode = hobbys[i];
//得到每一個復(fù)選框
//設(shè)置屬性是true
checkboxNode.checked = true;
}
}
</script>
</body>
</html>7.7 下拉列表的使用
常用屬性的使用
使用value屬性獲取和設(shè)置下拉列表選中選項的值
使用selectedIndex屬性獲取當(dāng)前被選中選項的索引
使用options屬性獲取所有選項集合
使用option對象的value屬性和text屬性, 可以讀寫這兩個屬性。
使用option對象的selected屬性選中該option
示例代碼如下所示:
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
