JS17-DOM操作之获取标签对象

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()循环
//      只会循环遍历获取到标签和索引,不会有多余的内容