1, 页面内容的获取
获取的是标签对象
如果你要获取标签对象,这个标签对象应该是已经存在的标签对象
2, 定义标签的属性,获取标签的属性值
设定标签属性的属性值
标签对象.setAttribute('属性',属性值)
getAttribute('属性')
3, value属性
设定标签的数据/参数 属性
input select textarea
input :
text password url email number.....
可以输入数据的输入框
value属性,可以获取输入的数据内容
获取的结果都是字符串类型
radio checkbox hidden ....
不能通过输入,来输入数据
只能是通过 标签的 value属性,来设定标签的数据/参数
value获取的就是 标签 value属性 设定的数据
select>option
是一个组合,必须捆绑使用
value属性,定义在option标签上
获取,是通过select标签的value来获取
还有两个特殊的, input>file textarea
input>file 不支持在标签中定义value属性
获取结果是空字符串
只能通过选择上传内容,来定义上传的文件等
textarea 不支持在标签中定义value属性
<ul>
<li class="li1" name="li2"></li>
<li class="li1" name="li2"></li>
<li class="li1" name="li2"></li>
<li class="li1" name="li2"></li>
<li class="li1" name="li2"></li>
</ul>
<script>
// 获取标签对象
// document.getElementById()
// document.querySelector() 获取一个标签对象
// document.getElementsByClassName()
// document.getElementsByTagName() 获取伪数组,不能forEach()循环
// document.getElementsByName()
// document.querySelector() 获取伪数组,可以forEach()循环
var oLis1 = document.getElementsByClassName('li1');
var oLis2 = document.querySelectorAll('.li1');
// 两种方式获取的都是伪数组,但是获取的数组内容,不同
// console.log(oLis1);
// console.log(oLis2);
// 不能用forEach()循环的
// oLis1.forEach(function(v){
// console.log(v)
// })
// 如果要循环可以使用for循环
// for(var i = 0 ; i <= oLis1.length-1 ; i++){
// console.log( oLis1[i] );
// }
// 还可以使用for..in循环
// 不同方式,获取的标签对象,虽然都是伪数组,但是伪数组的结构不同
// for...in循环的结果也不同
for(var index in oLis1){
console.log( oLis1[index] );
}
for(var index in oLis2 ){
console.log( oLis2[index] )
}
// forEach循环的结果
// oLis1 不能被forEach循环的
oLis2.forEach(function(v , k){
console.log(v , k)
})
// for...in 和 for循环的区别
// 1, for循环,索引是循环变量 for...in循环,索引是自定变量
// 2, for...in循环,比for循环多以一些内容
// for...in循环,在循环标签伪数组时,会多获取一些内容
// 在 __proto__ 中的 3个内容
// 之后做一些操作时,会产生报错信息,但是一般不会影响程序的正常执行
// 推荐:使用for循环,或者forEach()循环
// 只会循环遍历获取到标签和索引,不会有多余的内容
JS17-DOM操作之获取标签对象
猜你喜欢
转载自blog.csdn.net/DcTbnk/article/details/105268582
今日推荐
周排行