JAVAWEB第四天元素对象

最新推荐文章于 2024-03-25 09:35:21 发布

Alex十年

最新推荐文章于 2024-03-25 09:35:21 发布

阅读量202

点赞数

分类专栏： JAVAWEB

本文链接：https://blog.csdn.net/ilikejj0/article/details/78668017

版权

JAVAWEB 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

补充：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>

Alex十年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVAWEB第四天元素对象

补充：getAttribute(“属性”);&lt;input type="text" name="name1"/&gt;获取属性的值，其中写入的是属性即name，返回的是属性的值即name1，对于getElementsByName();其中写入的是属性的名字即name1,返回的是一个数组。对于getElementsById(),getElementsByName()以及getEl...
复制链接

扫一扫