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);
}