javascript学习笔记--dom查询练习

三个获取元素节点对象：
根据id获取一个元素节点对象
getElementById()
根据标签获得一组元素对象,返回类数组对象
getElementsByTagName()
根据name属性获取一组元素对象，返回类数组对象
getElementsByName()；

基本代码片段：

.but{
    clear: both;
}
li{
    width: 70px;
    height: 100%;
    background-color: aquamarine;
    list-style: none;
    border: 1px solid;
    display:inline;
    margin-right: 2px;
    margin-bottom: 10px;
   font-size: 10px;
}
.chosen{
    margin-top: 20px;
   
}
.left{
    float: left;
    width: 50%;
    
}
.right{
    float: right;
    width: 50%;
    
}

        

                你喜欢那个城市
                

                    
北京
                    
上海
                    
新加坡
                    
首尔
                
            
        
            

                你喜欢那个游戏
                

                    
象棋
                    
斗地主
                    
极品飞车
                    
红警
                
            
            

                你的性别：
                男
                女
            
            

            姓名：     
            

如图：

20181109080144.png

通过按钮获取制定元素节点

 
获取id=”bj“的节点
获取li的节点
查找name="gender所有节点

1.获取id=”bj“的节点
//为id=btn01按钮绑定一个单击响应事件,window.onload文档加载完成后执行

window.onload =function () {
var btn01=document.getElementById("id") //绑定单击响应事件
 btn01.onclick =function (){
        var bj=document.getElementById("bj");
         alert("你喜欢的城市是："+bj.innerHTML);
        };
}

2.获取所有li的节点，即使查询到的数组只有一个，也会返回一数组对象

var btn02=document.getElementById("btn02");
btn02.onclick =function () {
var lis=document.getElementByTagName("li");
}

3 innerHTML 用来获取元素内部的HTML代码的，并不适用于自结束标签,可直接读取该元素的任何属性，即 元素.属性名 但是，读取class(class是保留关键字)时 要用classNname

btn03.onclick=function(){
            var names=document.getElementsByName("gender");
            for(var j=0;j