《JavaScript DOM编程艺术》笔记一

最新推荐文章于 2024-07-08 16:22:29 发布

chy000111

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量54

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2310745/blog/813408

版权

1、CSS：继承是CSS技术中的一项强大功能，节点树上的各个元素将继承其父元素的样式属性。

2、3种获取DOM元素方法：getElementById返回一个对象，getElementsByTagName、getElementsByClassName返回对象数组

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Shopping list</title>
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff.</p>
        <ul id="purchases">
            <li>A tin of beans</li>
            <li class="sale">Cheese</li>
            <li class="sale important">Milk</li>
        </ul>
        <script type="text/javascript">
            console.log(document.getElementById("purchases"));
            console.log("--------------------------------------");
            console.log(document.getElementsByTagName("li"));//是标签名称，不是name属性
            console.log("--------------------------------------");
            console.log(document.getElementsByTagName("*"));
            console.log("--------------------------------------");
            // console.log(document.getElementsByTagName("*i"));//不是这样写
            console.log("--------------------------------------");
            //下面是先根据Id找到元素对象，然后在该元素对象内找li标签
            var shopping=document.getElementById("purchases");
            console.log(shopping.getElementsByTagName("li"));
            console.log("--------------------------------------");
            console.log(document.getElementsByClassName("sale"));
            console.log("--------------------------------------");
            //获取同时含有多个类的元素，类之间用空格隔开
            console.log(document.getElementsByClassName("important sale"));
            console.log("--------------------------------------");
            //在特定区域根据类名找li标签
            var shopping=document.getElementById("purchases");
            console.log(shopping.getElementsByClassName("sale"));
        </script>
    </body>
</html>

3、getElementsByClassName是HTML5中的，低版本浏览器不支持，下面提供兼容性方法

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

4、使用DOM提供的nodeValue属性获取或修改值

假如获取和修改上面页面p标签内容显示

首先获取到p元素节点var pElementNode=document.getElementsByTagName("p")[0]，因为只有一个p标签，所以取第一个

再获取p标签的文本节点var pTextNode=pElementNode.childNodes[0]或var pTextNode=pElementNode.firstChild，因为p标签内只有一个文本节点（如下会有两个文本节点<p>第一个文本节点<br/>第二个文本节点</p>）

获取文本节点内容pTextNode.nodeValue;//Don't forget to buy this stuff.

修改文本节点内容pTextNode.nodeValue="新赋值ppppppp";

转载于:https://my.oschina.net/u/2310745/blog/813408

chy000111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript DOM编程艺术》笔记一

1、CSS：继承是CSS技术中的一项强大功能，节点树上的各个元素将继承其父元素的样式属性。 2、3种获取DOM元素方法：getElementById返回一个对象，getElementsByTagName、getElementsByClassName返回对象数组 <!DOCTY...
复制链接

扫一扫