国产熟女少妇自拍,亚洲中字不卡,亚洲AV在线观看春色

DOM對象

DOM：Document Object Model 文檔對象模型

要實現(xiàn)頁面的動態(tài)交互效果，bom 操作遠遠不夠，需要操作 html 才是核心。如何操作 htm，就是 DOM。簡單的說，dom 提供了用程序動態(tài)控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節(jié)點樹，運行開發(fā)人員添加、移除和修改頁面的某一部分。dom 處于javascript 的核心地位上。

每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

image

節(jié)點

加載 HTML 頁面時，Web 瀏覽器生成一個樹型結(jié)構(gòu)，用來表示頁面內(nèi)部結(jié)構(gòu)。DOM 將這種樹型結(jié)構(gòu)理解為由節(jié)點組成，組成一個節(jié)點樹。對于頁面中的元素，可以解析成以下幾種類型的節(jié)點：

節(jié)點類型	HTML內(nèi)容	例如
文檔節(jié)點	文檔本身	整個文檔 document
元素節(jié)點	所有的HTML元素	<a>、<div>、<p>
屬性節(jié)點	HTML元素內(nèi)的屬性	id、href、name、class
文本節(jié)點	元素內(nèi)的文本	hello
注釋節(jié)點	HTML中的注釋

html --> 文檔節(jié)點

div --> 元素節(jié)點

title --> 屬性節(jié)點

測試 Div --> 文本節(jié)點

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n38" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><html>
 <head>
 <title>樹!樹!到處都是樹!</title>
 </head>
 <body>
 <div title="屬性節(jié)點">測試 Div</div>
 </body>
</html></pre>

image

操作元素的節(jié)點

當HTML文檔在被解析為一顆DOM樹以后，里面的每一個節(jié)點都可以看做是一個一個的對象，我們稱為DOM對象，對于這些對象，我們可以進行各式各樣的操作，查找到某一個或者一類節(jié)點對象，可以創(chuàng)建某種節(jié)點對象，可以在某個位置添加節(jié)點對象，甚至可以動態(tài)地刪除節(jié)點對象，這些操作可以使我們的頁面看起來有動態(tài)的效果，后期結(jié)合事件使用，就能讓我們的頁面在特定時機、特定的事件下執(zhí)行特定的變換。

獲取節(jié)點

在進行增、刪、改的操作時，都需要指定到一個位置，或者找到一個目標，此時我們就可以通過Document對象提供的方法，查找、定位某個對象（也就是我們說的節(jié)點）。

注意：操作 dom 必須等節(jié)點初始化完畢后，才能執(zhí)行。

處理方式兩種:

（1）把 script 調(diào)用標簽移到html末尾即可；

（2）使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件里的 JS。

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n50" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">window.onload = function () { //預(yù)加載 html 后執(zhí)行};</pre>

獲取方式如下：

方法	描述
getElementById()	根據(jù)id獲取dom對象，如果id重復，那么以第一個為準
getElementsByTagName()	根據(jù)標簽名獲取dom對象數(shù)組
getElementsByClassName()	根據(jù)樣式名獲取dom對象數(shù)組
getElementsByName()	根據(jù)name屬性值獲取dom對象數(shù)組，常用于多選獲取值

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n68" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><body>
<p id="p1" class="para">這是一個段落<span>文本</span></p>
<p id="p1" class="para">這又是一個段落</p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="籃球" />籃球
<input type="checkbox" name="hobby" value="足球" />足球
<hr />
<a href="javascript:void(0)" onclick="testById()">按照id獲取</a>
<a href="javascript:void(0)" onclick="testByName()">按照name獲取</a>
<a href="javascript:void(0)" onclick="testByTagName()">按照標簽名獲取</a>
<a href="javascript:void(0);" onclick="testByClass();">按照class獲取</a>
</body></pre>

說明：href="javascript:void(0)"：偽協(xié)議，表示不執(zhí)行跳轉(zhuǎn)，而執(zhí)行指定的點擊事件。

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n70" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><script type="text/javascript">
// 按照id獲取元素
function testById() {
// 返回單個對象
var p = document.getElementById("p1");
console.log(p);
// 表示獲取元素開始標簽和結(jié)束標簽之間的html結(jié)構(gòu)
console.log(p.innerHTML);
console.log(p.innerText); // 表示獲取標簽之間的普通文本
}
?
// 按照name獲取元素
function testByName() {
// 對象數(shù)組
var ho = document.getElementsByName("hobby");
console.log(ho);
for(var i = 0; i <= ho.length - 1; i++) {
console.log(ho[i].value);
}
}
?
// 按照標簽名獲取元素
function testByTagName() {
// 對象數(shù)組
var inputArr = document.getElementsByTagName("input");
for(var i = 0; i < inputArr.length; i++) {
if(inputArr[i].type == "text") {
console.log("text類型");
} else if(inputArr[i].type == "checkbox") {
if(inputArr[i].checked) {
console.log(inputArr[i].value);
}
}
}
}
?
// 按照class屬性獲取元素
function testByClass() {
// 對象數(shù)組
var ps = document.getElementsByClassName("para");
console.log(ps[0].innerHTML);
ps[0].innerHTML += "這是一段新的文本";
}
</script></pre>

創(chuàng)建節(jié)點和插入節(jié)點

很多時候我們想要在某個位置插入一個新的節(jié)點，此時我們首先需要有一個節(jié)點存在，可以通過以下幾種方式創(chuàng)建新節(jié)點。

創(chuàng)建節(jié)點

方法	描述
createElement()	創(chuàng)建一個新的節(jié)點，需要傳入節(jié)點的標簽名稱，返回創(chuàng)建的元素對象
createTextNode()	創(chuàng)建一個文本節(jié)點，可以傳入文本內(nèi)容
innerHTML	也能達到創(chuàng)建節(jié)點的效果，直接添加到指定位置了

插入節(jié)點

方法	描述
write()	將任意的字符串插入到文檔中
appendChild()	向元素中添加新的子節(jié)點，作為最后一個子節(jié)點
insertBefore()	向指定的已有的節(jié)點之前插入新的節(jié)點newItem：要插入的節(jié)點exsitingItem：參考節(jié)點需要參考父節(jié)點

添加 "段落、圖片、文本框、選項"

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n103" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><body>
<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加圖片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions()">添加選項</button>
<select name="music">
<option value="-1">你心內(nèi)的一首歌</option>
<option value="0">南山南</option>
<option value="1">喜歡你</option>
</select>
<hr />
<div id = "container"></div>
</body></pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n104" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><script type="text/javascript">
// 添加p節(jié)點
function addPara(){
// 獲取容器
var container =document.getElementById("container");
// 創(chuàng)建段落<p></p>
var p =document.createElement('p');
// 第一種方式
// 創(chuàng)建文本節(jié)點
var txt=document.createTextNode("以后的你會感謝現(xiàn)在努力的你");
// 將txt節(jié)點追加到p節(jié)點中
p.appendChild(txt);
// 將p節(jié)點追加到container節(jié)點中
container.appendChild(p);
/*
// 第二種方式
// 向p節(jié)點中添加內(nèi)容
p.innerHTML = "以后的你會感謝現(xiàn)在努力的你";
// 將p節(jié)點追加到container節(jié)點中
container.appendChild(p);
/
/
// 第三種方式
// 將字符串類型的p標簽內(nèi)容添加到container中，不會添加多次
var str = "<p>以后的你會感謝現(xiàn)在努力的你</p>";
container.innerHTML = str;
*/
}

// 添加圖片
function addImg(){
// 創(chuàng)建圖片
var img = document.createElement("img") ;
/*
// 設(shè)置屬性第一種方式
// 設(shè)置img標簽的src屬性
// img.src ="http://www.baidu.com/img/bd_logo1.png";
*/
// 設(shè)置屬性第二種方式
// setAttribute() 方法添加指定的屬性，并為其賦指定的值。
// 設(shè)置img的src屬性
img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
img.style.width = '300px';
img.style.height = '200px';
// 獲取容器
var container =document.getElementById("container");
// 將img節(jié)點追加到container中。
container.appendChild(img);
}

// 添加文本框
function addTxt(){
// 創(chuàng)建文本框
var txt =document.createElement("input");
/*
// 設(shè)置類型第一種方式
txt.type = "text";
txt.value = "添加成功";
/
// 設(shè)置類型第二種方式
txt.setAttribute('type', 'text');
txt.setAttribute('value', '添加成功');
/

txt.type = 'password'
txt.value = '123'
*/
// 獲取容器
var container =document.getElementById("container");
// 將txt節(jié)點追加到container中。
container.appendChild(txt);
}

// 添加下拉框的選項
function addOptions(){
// 第一種方式
/*
// 創(chuàng)建下拉項
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "油菜花" ;
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉項
sel.appendChild(option);
*/
// 第二種方式:
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "不該" ;
// 獲取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉項
sel.options.add(option);
// 第三種方式: 添加下拉項
var sel = document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value = '2'>英雄</option>" ;
}
</script></pre>

間接查找節(jié)點

| 方法|屬性 | 描述 |
| --- | --- |
| childNodes | 返回元素的一個子節(jié)點的數(shù)組 |
| firstChild | 返回元素的第一個子節(jié)點 |
| lastChild | 返回元素的最后一個子節(jié)點 |
| nextSibling | 返回元素的下一個兄弟節(jié)點 |
| parentNode | 返回元素的父節(jié)點 |
| previousSibling | 返回元素的上一個兄弟節(jié)點 |

刪除節(jié)點

| 方法|屬性 | 描述 |
| --- | --- |
| removeChild() | 從元素中移除子節(jié)點 |

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n138" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><script type="text/javascript">
function delNode(){
var programmer =document.getElementById("programmer");
// 從父元素中刪除節(jié)點，獲取要刪除對象的父元素，然后從父元素中刪除該對象
programmer.parentNode.removeChild(programmer);
}
</script>
<body>
<span id="programmer">程序猿</span>
<a href="javascript:void(0)" onclick="delNode();">刪除</a>
</body></pre>

表單

表單是我們頁面向后臺傳輸數(shù)據(jù)的一種非常常見的方式，在進行數(shù)據(jù)發(fā)送（請求發(fā)出）之前，我們應(yīng)該現(xiàn)在頁面進行一系列數(shù)據(jù)合法性的驗證，節(jié)省不必要的錯誤數(shù)據(jù)的傳輸，以及提高用戶的體驗度。

獲取表單

前兩種常用

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n144" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1、document.表單名稱
2、document.getElementById(表單 id);
3、document.forms[表單名稱]
4、document.forms[索引]; //從 0 開始</pre>

例如：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n146" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><body>
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
//四種方式
var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script></pre>

獲取表單元素

獲取input元素

如 text password hidden textarea等，前兩種常用。

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n151" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1)、通過 id 獲?。篸ocument.getElementById(元素 id);
2)、通過 form.名稱形式獲取: myform.元素名稱; name屬性值
3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、通過 tagName 數(shù)組 :document.getElementsByTagName('input')[索引] // 從0開始</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n152" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隱藏域" />
個人說明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >獲取元素內(nèi)容</button>
</form>
</body>
<script>
function getTxt(){
var uno = document.getElementById("uno");
var uname = myform.uname;
console.log(uname + "--------");
var upwd = document.getElementsByTagName('input')[1] ;
var intro = document.getElementsByName("intro")[0];
console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
}
</script></pre>

獲取單選按鈕

前提：將一組單選按鈕設(shè)置相同的name屬性值

(1)獲取單選按鈕組：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n157" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">document.getElementsByName("name屬性值");</pre>

(2)遍歷每個單選按鈕，并查看單選按鈕元素的checked屬性

若屬性值為true表示被選中，否則未被選中

選中狀態(tài)設(shè)定： checked='checked' 或 checked='true' 或 checked

未選中狀態(tài)設(shè)定：沒有checked屬性或 checked='false'

獲取多選按鈕

操作方式與單選同理，不同之處在于可以多選

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n166" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){
if(ufav[i].checked){
favstr += ufav[i].value+",";
}
}
favstr = favstr.substr(0,favstr.length-1);</pre>

獲取下拉選項

（1）獲取 select 對象：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n170" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var ufrom = document.getElementById("ufrom");</pre>

（2）獲取選中項的索引：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n172" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var idx = ufrom.selectedIndex;</pre>

（3）獲取選中項 options 的 value屬性值：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n174" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var val = ufrom.options[idx].value;</pre>

注意：當通過options獲取選中項的value屬性值時，

若沒有value屬性，則取option標簽的內(nèi)容

若存在value屬性，則取value屬性的值

（4）獲取選中項 options 的 text：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n179" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var txt = ufrom.options[idx].text;</pre>

選中狀態(tài)設(shè)定：selected='selected'、selected=true、selected

未選中狀態(tài)設(shè)定：不設(shè)selected屬性

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n182" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><body onload="init()">
<form id='myform' name="myform" action="" method="">
來自:
<select id="ufrom" name="ufrom">
<option value="-1" >請選擇</option>
<option value="0" selected="selected">北京</option>
<option value="1">上海</option>
</select><br />
<button type="button" id="sub" name="sub">提交</button>
</form>
</body>
<script>
function init () {
var sub = document.getElementById("sub");
sub.onclick = function () {
//獲取select對象
var ufrom = document.getElementById("ufrom");
console.log("表單對象：" + ufrom);
//獲取選中的索引
var idx = ufrom.selectedIndex;
console.log("選中項的索引值：" + idx);
//獲取選中項的value值
var val = ufrom.options[idx].value;
console.log("選中項的value屬性值：" + val);
//獲取選中項的text
var txt = ufrom.options[idx].text;
console.log("選中項的text：" + txt);
}
}
</script></pre>

提交表單

（1）使用普通button按鈕+onclick事件+事件中編寫代碼:

獲取表單.submit();

（2）使用submit按鈕 + onclick="return 函數(shù)()" +函數(shù)編寫代碼:

最后必須返回：return true|false;

（3）使用submit按鈕/圖片提交按鈕 + 表單onsubmit="return 函數(shù)();" +函數(shù)編寫代碼:

最后必須返回：return true|false;

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" contenteditable="true" cid="n191" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">
<input name="test" id="uname"/><span id="msg"></span><br />

<input type="button" onclick="sub();" value="提交表單1" />
<input type="submit" onclick="return sub2();" value="提交表單2" />
<input type="submit" value="提交onsubmit" /><br />
<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"
width="60px" height="40px" />
</form>
<script type="text/javascript">
// input的type=button，調(diào)用submit()方法提交
function sub(){
document.myform2.submit();
}
// 進行校驗，返回值為true才能提交
function sub2(){
var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){
return true; // 提交
}
document.getElementById("msg").innerHTML = "不能空著?。。?！";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
// onsubmit事件提交
function onsub () {
var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){
return true; // 提交
}
document.getElementById("msg").innerHTML = "填寫點兒東西唄！(ˉ▽￣～) 切~~";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
</script></pre>

表單校驗

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n195" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">/**
要求：
1、驗證用戶名
1)不能為空
2)長度為 6-12 位
2、驗證密碼
1)不能為空 *
2)長度為 6-12 位
3)不能包含用戶名
3、年齡: 必須選擇你懂得
4、愛好: 必須選擇一項
5、來自: 必須選擇一項
滿足以上條件
1、彈出所有的內(nèi)容
2、提交表單
否則
1、說明錯誤原因
2、不能提交表單
*/</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" contenteditable="true" cid="n196" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 通過id屬性值得到dom對象
function $(id) { return document.getElementById(id); } // 重置表單所有元素注意函數(shù)不能命名為 clear reset 等 function resetForm(){ // 獲取說明 div var validate =$ ('validate');
validate.innerHTML ="";
}
// 表單校驗
function checkForm () {
var flag =true;
// 獲取說明 div
var validate = $('validate'); validate.innerHTML =""; // 1、驗證用戶名 // 1)、獲取用戶名的值 var uname =$ ('uname').value;
// 1)不能為空 -->后期正則處理
// 2)長度為 6-12 位
if("" === uname || uname.length == 0 ){
validate.innerHTML += "用戶名不能為空</br>";
flag = false;
}else if(uname.length < 6 || uname.length > 12){
validate.innerHTML += "用戶名長度在 6-12 位</br>";
flag = false;
}
// 2、驗證密碼
var upwd = $('upwd').value; // 1)不能為空 // 2)長度為 6-12 位 // 3)不能包含用戶名 if("" === upwd || upwd.length == 0 ){ validate.innerHTML += "*密碼不能為空</br>"; flag = false; } else if(upwd.length < 6 ||upwd.length > 12){ validate.innerHTML += "*密碼長度在 6-12 位</br>"; flag = false; } else if(uname.length > 0 && upwd.indexOf(uname) >= 0){ validate.innerHTML += "*密碼中不能出現(xiàn)用戶名</br>"; flag = false; } // 3、年齡: 必須選擇你懂得 var ageGroup = document.getElementsByName("uage"); var age ; for (var i = 0; i < ageGroup.length; i++) { if(ageGroup[i].checked){ age = ageGroup[i].value; } } if(age == 0){ flag = false; validate.innerHTML += "*小屁孩，媽媽喊你回家</br>"; } // 4、愛好: 必須選擇一項 var ufav = document.getElementsByName("ufav"); var favstr = ""; for (i = 0;i < ufav.length; i++){ if(ufav[i].checked){ favstr += ufav[i].value + ","; } } favstr = favstr.substr(0,favstr.length-1); if(favstr.length < 1){ flag = false; validate.innerHTML += "*人生真無趣</br>"; } // 5、來自 var ufrom =$ ('ufrom');
var idx = ufrom.selectedIndex ;
var val = ufrom.options[idx].value;
var valTxt = ufrom.options[idx].text;
if(-1 == val){
flag = false;
validate.innerHTML += "*你來自火星嗎?</br>";
}
// 滿足以上條件彈出內(nèi)容
if(flag){
var str = "";
str += "您的姓名是:" + uname + "\n";
str += "您的密碼是:" + upwd + "\n";
str += "您的年齡是:" + "可以贏取白富美了" + "\n";
str += "您的愛好是:" + favstr + "\n";
str += "您來自于:" + valTxt + "\n";
alert(str);
// 設(shè)置表單提交的地址
myform.action="http://www.baidu.com";
// 提交表單
myform.submit();
return false;
} else {
return false;
}</pre>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

dom對象是什么--樂字節(jié)大數(shù)據(jù)

dom對象是什么--樂字節(jié)大數(shù)據(jù)

DOM對象

節(jié)點

操作元素的節(jié)點

獲取節(jié)點

創(chuàng)建節(jié)點和插入節(jié)點

創(chuàng)建節(jié)點

插入節(jié)點

間接查找節(jié)點

刪除節(jié)點

表單

獲取表單

獲取表單元素

獲取input元素

獲取單選按鈕

獲取多選按鈕

獲取下拉選項

提交表單

表單校驗

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

dom對象是什么--樂字節(jié)大數(shù)據(jù)

DOM對象

節(jié)點

操作元素的節(jié)點

獲取節(jié)點

創(chuàng)建節(jié)點和插入節(jié)點

創(chuàng)建節(jié)點

插入節(jié)點

間接查找節(jié)點

刪除節(jié)點

表單

獲取表單

獲取表單元素

獲取input元素

獲取單選按鈕

獲取多選按鈕

獲取下拉選項

提交表單

表單校驗

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av