操作对象_DOM进阶——HTML属性操作(对象属性)
????上一節(jié)我們在“DOM基礎(chǔ)”學(xué)習(xí)了對元素節(jié)點的操作，這兩節(jié)介紹對屬性節(jié)點的操作。
????屬性節(jié)點操作有兩種方式，一種是使用“對象屬性”，另一種是“對象方法”。本節(jié)主要介紹“對象屬性”的方式。
????對屬性節(jié)點的操作涉及兩種操作，分別是獲取HTML屬性值和設(shè)置HTML屬性值。?
獲取HTML屬性值
用法：?
obj.attr
obj即是我們上一節(jié)獲取的元素節(jié)點，attr是屬性名。?
獲取屬性舉例：?
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>獲取屬性title>
????????<script>
????????????window.onload?=?function(){
????????????????var?oBtn?=?document.getElementById("btn1");
????????????????oBtn.onclick?=?function(){
????????????????????alert(oBtn.id);
????????????????}
????????????}
????????script>
????head>
????<body>
????????<input?type="button"?id="btn1"?class="btn2"?value="獲取屬性"?/>
????body>
html>
????獲取id用oBtn.id，獲取class需要用oBtn.className，獲取type用oBtn.type。? ?
獲取文本框值舉例：?
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>獲取文本框值title>
????????<script>
????????????window.onload?=?function(){
????????????????var?oBtn?=?document.getElementById("btn");
????????????????oBtn.onclick?=?function(){
????????????????????var?oTxt?=?document.getElementById("txt")
????????????????????alert(oTxt.value);
????????????????}
????????????}
????????script>
????head>
????<body>
????????<input?type="text"?id="txt"/>
????????<input?type="button"?id="btn"?value="獲取文本框值"?/>
????body>
html>
?
獲取單選框值舉例：
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>獲取單選框值title>
????????<script>
????????????window.onload?=?function(){
????????????????var?oBtn?=?document.getElementById("btn");
????????????????var?oKing?=?document.getElementsByName("king");
????????????????oBtn.onclick?=?function(){
????????????????????for(var?i?=?0;i?<?oKing.length;i++){
????????????????????????if(oKing[i].checked){
????????????????????????????alert(oKing[i].value)
????????????????????????}
????????????????????}
????????????????}
????????????}
????????script>
????head>
????<body>
????????<div>
????????????<label><input?type="radio"?name="king"?value="劉德華"?checked/>劉德華label>
????????????<label><input?type="radio"?name="king"?value="張學(xué)友"?/>張學(xué)友label>
????????????<label><input?type="radio"?name="king"?value="郭富城"?/>郭富城label>
????????????<label><input?type="radio"?name="king"?value="黎明"?/>黎明label>
????????div>
????????<input?type="button"?id="btn"?value="獲取單選框值"?/>
????body>
html>
?
獲取下拉菜單的值舉例：?
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>獲取下拉菜單的值title>
????????<script>
????????????window.onload?=?function(){
????????????????var?oBtn?=?document.getElementById("btn");
????????????????var?oSelect?=?document.getElementById("select")
????????????????oBtn.onclick?=?function(){
????????????????????alert(oSelect.value);
????????????????}
????????????}
????????script>
????head>
????<body>
????????<select?id="select">
????????????<option?value="劉德華">劉德華option>
????????????<option?value="張學(xué)友">張學(xué)友option>
????????????<option?value="郭富城">郭富城option>
????????????<option?value="黎明">黎明option>
????????select>
????????<input?type="button"?id="btn"?value="獲取下拉菜單的值"?/>
????body>
html>
????當(dāng)用戶選中一個option時候，該option的value值會成為select的value值。??
設(shè)置HTML屬性值
用法與獲取HTML屬性值的方式相同。
舉例：?
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>設(shè)置HTML屬性值title>
????????<script>
????????????window.onload?=?function(){
????????????????var?oBtn?=?document.getElementById("btn");
????????????????oBtn.onclick?=?function(){
????????????????????oBtn.value?=?"button";
????????????????}
????????????}
????????script>
????head>
????<body>
????????<input?type="button"?id="btn"?value="獲取"?/>
????body>
html>
沒有按按鈕結(jié)果圖
點擊“獲取”后
本節(jié)主要學(xué)習(xí)了使用“對象屬性”對屬性節(jié)點操作，最后對其總結(jié)。
獲取HTML屬性值
設(shè)置HTML屬性值
總結(jié)
以上是生活随笔為你收集整理的操作对象_DOM进阶——HTML属性操作(对象属性)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jeecg输入中文查询导表为空_简单查询
- 下一篇： 如何画圆柱_什么是最速降线？如何来验证一