HTML属性操作（对象属性）
HTM属性操作 (对象属性）
指：用JavaScript 来操作一个元素的HTML 属性
如 下面这个，操作他的id type value ......
<input id="btn" type="button" value="提交"/>
操作HTML 元素属性的方式有2种
1.使用对象属性
2.使用对象方法
不管那种方式，都会涉及到 2 种操作
获取HTML属性值 和 设置HTML 属性值
元素操作的是：“元素节点” 属性操作的是：“属性节点”
获取HTML 元素的属性值，一般通过属性名，来找到属性对应的值
语法： obj.attr
obj:元素名 是一个DOM对象 ，也就是getElementById() getElementsByTagName()
等方法获取到的元素节点
attr :是属性名 对象 是通过"." 运算符来获取它的属性值
使用obj.attr 这种方式，不仅能获取静态HTML元素的属性值，
也可以用来获取动态创建的DOM元素中的属性值
例子：获取单行文本框的值
单行文本框，HTML默认给它添加了一个value属性，只不过value属性是空的，
<input id="txt" type="text"/>
//等价于
<input id="txt" type="text" value=""/>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oTxt = document.getElementById("txt");
alert(oTxt.value);
}
}
<input id="txt" type="text">
<input id="btn" type="button" value="获取" />
例子：获取单选框的值
window.onload = function () {
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
oBtn.onclick = function () {
//for循环遍历 所有的单选框
for (var i = 0; i < oFruit.length; i++) {
//判断当前遍历的单选框是否被选中，也就是checked是否为true
if (oFruit[i].checked) {
alert(oFruit[i].value);
}
}
}
}
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="梨子" />梨子</label>
<label><input type="radio" name="fruit" value="杏子" />杏子</label>
</div>
<input id="btn" type="button" value="获取" />
例子：获取复选框的值
window.onload = function () {
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
var str = "";
oBtn.onclick = function () {
//for循环遍历 所有的单选框
for (var i = 0; i < oFruit.length; i++) {
if (oFruit[i].checked) {
str += oFruit[i].value;
}
}
alert(str);
}
}
<div>
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="梨子" />梨子</label>
<label><input type="checkbox" name="fruit" value="杏子" />杏子</label>
</div>
<input id="btn" type="button" value="获取" />
例子：获取下拉列表的值
下拉菜单比较特殊，当用户选中哪一个option时，该option的value值就会自动变成当前select元素的value值
value是传给后台处理的，而标签中 的文本是给用户看的，这两个值 大多数时候是一样的，但有时会不一样，这取决于开发需求
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oSelect = document.getElementById("select");
alert(oSelect.value);
}
}
<select id="select">
<option value="北京">北京</option>
<option value="浙江">浙江</option>
<option value="江苏">江苏</option>
<option value="南京">南京</option>
</select>
<input id="btn" type="button" value="获取" />
设置HTML属性值 (也是通过属性名来设置的)
语法： obj.attr = "值"；
obj是元素名 是个DOM对象，
attr 是属性名
window.onload = function () {
var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true;
oBtn.onclick = function () {
if (flag) {
oPic.src = "./images/lei_1.jpg";
flag = false;
} else {
oPic.src = "./images/bg-1.png";
flag = true;
}
}
}
<input id="btn" type="button" value="切换" />
<img id="pic" src="./images/bg-1.png" />
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
oBtn.value = "button";
}
}
<input id="btn" type="button" value="修改" />
HTML属性操作（对象方法） 四种方法
getAttribute() 只有一个参数， 注这个参数是用英文引号括起来的
setAttribute()
removeAttribute()
hasAttribute()
getAttribute() 获取元素的某个属性的值
语法：obj.getAttribute("attr")
obj 是元素名， attr是属性名
等价于
obj.attr;
setAttribute() 方法 ，设置元素的某个属性的值
语法：obj.setAttribute("attr","值")；
obj是元素名 arrt是属性名
setAttribute() 有2个参数，第一个参数：属性名， 第二个参数是：你要设置的属性值
obj.setAttribute("attr","值")；
等价于
obj.attr ="值"；
getAttribute() 获取元素的某个属性的值
obj.getAttribute("attr")
等价于
obj.attr;
obj.setAttribute("attr","值")；
等价于
obj.attr ="值"；
以上的是等价的，不仅可以用来获取静态HTML元素的属性值，也可获取动态DOM元素中的属性值
唯一的区别在于，获取或设置自定义属性值 的时候是有区别的
<input id="btn" type="button" value="插入" data="javascript" />
比如上面这个标签里有一个自定义的属性data,(也就是用户自己定义，而不是元素自带的)
使用obj.arr(对象属性方式是无法实现的) 会提示undefined 因为这个无法获取自定义的属性值
只能使用obj.getAttribute("attr")(对象方法来实现)
实例1：获取固有属性值
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert(oBtn.getAttribute("id"));
}
}
<input id="btn" class="myBtn" type="button" value="获取" />
实例2：获取自定义属性值
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
//data是自定义属性而不是元素自带的 使用obj.attr(对象属性方式)是无法实现的
//只能使用对象方法方式来实现 getAttribute("attr")
//alert(oBtn.data); //undefined
alert(oBtn.getAttribute("data"));
}
}
<input id="btn" type="button" value="插入" data="javascript" />
实例3：设置固有属性值
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
oBtn.setAttribute("value", "button");
}
}
<input id="btn" type="button" value="修改">
removeAttribute()方法 删除元素的某个属性
先用hasAttribute() 判断这个属性是否存在，如果存在，在去删除语法：obj.removeAttribute("attr");//这是删除元素的某个属性的唯一方法，，用对象属性是无法实现的
hasAttribute() 方法 判断元素是否含有某个属性
语法： obj.hasAttribute("attr");
返回的是一个布尔值， 如果包含则返回true , 如果不包含则返回false
严谨做法：先用 hasAttribute() 判断这个属性是否存在，
如果存在在使用removeAttribute("");进行删除
在实际中 removeAttribute(" ");更多的是 结合class 属性来 “整体” 控制元素的样式属性
![]()
<style>
.main {
color: red;
font-weight: bold;
}
</style>
window.onload = function () {
var oP = document.getElementsByTagName("p");
var oBtn_add = document.getElementById("btn_add");
var oBtn_remove = document.getElementById("btn_remove");
//添加样式
oBtn_add.onclick = function () {
oP[0].className = "main";
}
//删除样式
oBtn_remove.onclick = function () {
//下面是删除样式的两种方法,是等价的
//oP[0].removeAttribute("class");
oP[0].className = "";
}
}
<p>这是一个网站</p>
<input id="btn_add" type="button" value="添加样式">
<input id="btn_remove" type="button" value="删除样式" />
<style>
.main {
color: red;
font-weight: bold;
}
</style>
<script>
window.onload = function () {
var oP = document.getElementsByTagName("p");
if (oP[0].hasAttribute("class")) {
oP[0].onclick = function () {
oP[0].removeAttribute("class");
}
}
}
<p class="main">这是一个网站</p>
总结：对象属性方式 和 对象方法方式，不仅可以操作静态HTML的属性
还可以操作动态的DOM的属性
只有“对象方法方式” 才可以操作自定义属性
浙公网安备 33010602011771号