复习之JavaScript基本语法（三）——getElement[...]方法使用

JavaScript核心document.getElementById()

document.getElementById()是根据id获取标签对象

//获取标签对象的值
//文本域和文本框都用value取值
document.getElementById("username").value;

//div,p,span,h1,h2都是innerHTML
document.getElementById("div1").innerHtTML;

改变样式

var div2=document.getElementById("div2");
        //一个属性由两个单词组成时把“-”改成驼峰格式
        div2.style.backgroundColor="red";
        div2.style.fontSize="28px";
        div2.style.color="blue";

对其属性改变

 //给button设置一个name的属性
    button.setAttribute("name","button");
    //删除p上的align属性
    p.removeAttribute("align");
    p.style.color="#f00f00";
    p.style.fontWeight="bold";

检索

 //创建对象cityObject，该对象为div层
    var cityObjcet =document.getElementById("city")
    //检索div中的的li
        var objects2=cityObjcet.getElementsByTagName("li")
        //alert(objects2.length)
        //检索节点的属性值
        var  attrNode =cityObjcet.getAttributeNode("style").nodeValue
        //alert(attrNode)
        //获取元素的所有子节点（包括文字节点 如：连续空格为一个子节点）
        var children =cityObjcet.childNodes//获得第一个子节点 firstChild 最后一个节点 lastChild
        //alert(children.length)

        //查看div节点的类型
        //alert(cityObjcet.nodeType)
        //查看div节点的标签名
        //alert(cityObjcet.nodeName)
        //查看节点值 若无为null
        //alert(cityObjcet.nodeValue)

getElementsByName()方法

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
因为文档中的name属性可能不唯一，所以getElementsByName()方法返回的是元素的数组，而不是一个元素。
这个方法不多用，主要用在复选框，需要多个标签同用一个name的情况下

<input type="checkbox" name="aihao" value="吃饭">吃饭
<input type="checkbox" name="aihao" value="睡觉">睡觉

var aihao = document.getElementsByName("aihao");
        for (var i=0;i<aihao.length;i++){
            alert(aihao[i].value);
        }

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是他们在文档中的顺序。

<div id="div1">这是div1哦</div>
<div id="div2">这是div2哦</div>

   var divs =document.getElementsByTagName("div");
       for (var i=0;i<divs.length;i++){
           alert(divs[i].innerHTML);
       }