DOM之获取元素，获取和设置属性

最新推荐文章于 2024-05-13 09:25:22 发布

Wangdanting123

最新推荐文章于 2024-05-13 09:25:22 发布

阅读量1.2w

点赞数 1

文章标签： javascript dom

本文链接：https://blog.csdn.net/Wangdanting123/article/details/51105654

版权

1.getElementsByTagName允许把一个通配符作为一个参数，而这意味着文档里的每一个元素都将在这个函数所返回的数组里占有一席之地。通配符（“*”），如果想知道某文档里总共有多少个元素节点。

document.getElementsByTagName("*").length;

2.如果想知道id属性值是purchase的元素包含着多少个列表项，

var shopping=document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");

3.要指定多个类名，只要再字符串参数中用空格分隔类名即可。

document.getElementsByClassName("important sale").length;

表示同时带有“important"和“sale”的类名，类名的实际顺序不重要，就算元素还带有更多的类名也没关系。

可能有浏览器不支持getElementsByClassName，就只能用已有的DOM来实现该功能。

<body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Don't forget to buy this stuff</p>
    <ul id="purchases">
        <li class="important">A tin of beans</li>
        <li class="sale">A tin of beans2</li>
        <li class="sale">A tin of beans3</li>
    </ul>
    <script>
         function getElementsByClassName(node,classname){
            if(node.getElementsByClassName){
                return node.getElementsByClassName(classname);
            }
            else{
                var results=new Array();
                var elems=node.getElementsByTagName("*");
                for(var i=0;i<elems.length;i++){
                    if(elems[i].className.indexOf(classname)!=-1){
                        results[results.length]=elems[i];
                    }
                }
                return results;
            }
        }
        var shopoing=document.getElementById("purchases");
        var sales=getElementsByClassName(shopoing,"sale");
    </script>
</body>

4.一份文档就是一棵节点树。

5.节点分为不同类型，元素节点，属性节点，文本节点。

6.getElementById将返回一个对象，该对象对应着文档里的一个特定的元素节点。

7.每个节点都是一个对象

8.得到元素后，我们就用getAttribute获取它的各个属性，用setAttribute更改属性节点的值。

getAttribute方法不属于document对象，所以不能通过document对象调用，只能通过元素节点对象调用。

<body>
    <h1>What to buy</h1>
    <p>Don't forget to buy vegetable</p>
    <p title="a gentle reminder">Don't forget to buy this stuff</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li>A tin of beans2</li>
        <li>A tin of beans3</li>
    </ul>
 <!-- 得到元素后，我们就用getAttribute获取它的各个属性，用setAttribute更改属性节点的值。-->
    <script type="text/javascript">
        var paras=document.getElementsByTagName("p");
        for(var i=0;i<paras.length;i++){
            var titleText=paras[i].getAttribute("title");
            if(titleText){       //if(titleText!=null)
                alert(titleText);
            }
        }
    </script>
</body>

9. setAttribute也只用于元素节点，如果setAttribute用在一个本身就有某个属性的元素节点上，则这个属性的值就会被覆盖，如果这个属性原先不存在，这表明setAttribute实际完成了两项操作，先创建这个属性，然后设置它的值。

 <script type="text/javascript">
        var shopping=document.getElementById("purchases");
        shopping.setAttribute("title","a list of goods");
    </script>

10.通过 setAttribute对文档做出修改后，在通过浏览器的查看源代码选项去查看文档的源代码时看到的仍将是改变前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源代码里。这种表里不一的现象源自DOM的工作模式，先加载文档的静态内容，在动态刷新，动态刷新不影响文档的静态内容，对页面内容进行刷新却不需要再浏览器里刷新页面。