您的位置：首页 > 编程语言 > Java开发

JAVAWEB第四天元素对象

2017-11-29 18:40 99 查看
补充：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<
4000
/span>=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航