补充:getAttribute(“属性”);
<input type="text" name="name1"/>
获取属性的值,其中写入的是属性即name,返回的是属性的值即name1,对于getElementsByName();其中写入的是属性的名字即name1,返回的是一个数组。
对于getElementsById(),getElementsByName()以及getElementsByTagName();获取的都是标签对象
getAttribute();获取的也是标签对象
getAttributeNode();获取属性,属性属于某个标签,所以在标签上使用该方法
var span1=document.getElementById("s1");
var id2=span1.getAttributeNode("id");
一、element元素对象
1.getAttribute(“属性”);获取属性的值
<body>
<input id="id1" type="text" value="你好" />
</body>
<script>
var input1=document.getElementById("id1");
var input2=input1.getAttribute("value");
alert(input2);//和下面代码效果相同
alert(input1.value);
</script>
2.setAttribute();设置属性及属性值
var input1=document.getElementById("id1");
input1.setAttribute("name","hello");
var input2=input1.getAttribute("name");
alert(input2);
3.removeAttribute();删除属性
input1.removeAttribute("value");
4.childNodes();获取标签下的子标签,在浏览器中的兼容性很差,唯一有效的办法是使用getElementByTagName();虽然该方法是属于document的方法,但在此是其特殊用法
<body>
<ul id=id1>
<li>刘亦菲</li>
<li>章子怡</li>
<li>林俊杰</li>
</ul>
</body>
<script>
var ul1=document.getElementById("id1");
var lis=ul1.getElementsByTagName("li");
alert(lis.length);
</script>
二、Node对象属性一
<body>
<span id="s1">你好</span>
</body>
1.标签节点对应对应的值
<body>
<span id="s1" name="name2">你好</span>
</body>
<script>
var span1=document.getElementById("s1");
document.write(span1.nodeType);//1
document.write(span1.nodeName);//SPAN
document.write(span1.nodeValue);//null
</script>
2.属性节点对应的值
<body>
<span id="s1" name="name2">你好</span>
</body>
<script>
var span1=document.getElementById("s1");
var id2=span1.getAttributeNode("id");
document.write(span2.nodeType);//2
document.write(span2.nodeName);//属性名称
document.write(span2.nodeValue);//属性的值
</script>
3.文本节点对应的值
<body>
<span id="s1" name="name2">你好</span>
</body>
<script>
var span1=document.getElementById("s1");
var text1=span1.firstChild;
document.write(text1.nodeType);//3
document.write(text1.nodeName);//#text
document.write(text1.nodeValue);//你好
</script>
三、Node对象属性二
父节点、子节点、同辈节点(针对标签进行的操作)
<ul id="ul1">
<li id="li1" value="1">刘亦菲</li>
<li id="li2" value="2">章子怡</li>
<li id="li3" value="3">林俊杰</li>
</ul>
父节点:ul是li的父节点,属性是parentChild
子节点:li是ul的子节点,属性有childNodes,但是兼容性很差,firstChild获取第一个子节点,lastChild获取最后一个子节点
同辈节点:li之间是同辈节点,也称兄弟节点,属性nextSibling,获取下一个子节点,previousSibling获取上一个子节点
四、innerHTML属性,不属于DOM属性,但是是大多数浏览器都支持的属性
有两个作用,1.获取文本内容2.设置文本内容,同时可以设置HTML代码
<span id="s1" name="name2">路漫漫其修远兮,吾将上下而求索</span>
<script>
var span1=document.getElementById("s1");
alert(span1.innerHTML);
</script>
<span id="s1" name="name2">路漫漫其修远兮</span>
<script>
var span1=document.getElementById("s1");
span1.innerHTML=span1.innerHTML+"<b>吾将上下而求索</b>";
</script>