高程三 DOM对象

最新推荐文章于 2023-06-26 22:38:08 发布

aozhou9334

最新推荐文章于 2023-06-26 22:38:08 发布

阅读量114

点赞数

原文链接：http://www.cnblogs.com/linbudu/p/10529869.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <style>
        button{
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 写在前面：文档节点是每个文档的根节点，<html>元素称之为文档元素，在这个网页中是文档节点的唯一子节点 -->
    <!-- 在html中文档元素始终都是<html>元素 而在XML中，任何元素都可能成为文档元素 -->
        <p>linbudu</p>
        <p class="para">insert the node</p>
        <button style="background-color:lightskyblue;" οnclick="ale()">A Button</button>
    <script>
        var somenode = document.getElementsByTagName("p")[0];
        //返回HTMLCollection对象，这个对象有一个方法叫做namedItem(),使用这个方法可以通过元素的name特性取得集合中的项
        var nodeList = somenode.childNodes;
        var textnode = nodeList[0];
        var textnode_1 = nodeList.item(1);//等于上面的获取方法
        // var arr = [1,2,3];
        console.log(nodeList);//NodeList,类数组，可通过方括号语法访问其值，同时有length属性，但其原型指向NodeList对象 不是Array的实例
        //同时，NodeList是有生命有呼吸的对象，会随着DOM结构的变化自动反映
        // console.log(arr);//原型指向Array
        console.log(textnode);//"linbudu"，获取到了文本节点
        console.log(textnode.parentNode,textnode.previousSibling,textnode.nextSibling);//等于somenode,null null 返回前一个与后一个兄弟节点
        console.log(somenode,somenode.firstChild,somenode.lastChild);// "linbudu"*2
        console.log(somenode.nodeType);//1
        console.log(textnode.nodeType);//3
        console.log(textnode.nodeName,textnode.nodeValue);// #text linbudu
        console.log(somenode.nodeName,somenode.nodeValue);// p null
        console.log(textnode.hasChildNodes());//false 比去获取childnode再获取长度更有效的判断有无子节点
        console.log(textnode.ownerDocument);//#document  所有节点都有这个属性 ，指向整个文档的文档节点
        // console.log(Node.ELEMENT_NODE);//1 元素节点
        // console.log(Node.ATTRIBUTE_NODE);//2
        // console.log(Node.TEXT_NODE);//3
        // console.log(Node.DOCUMENT_NODE);//9
        //Node类型中定义了12个数值常量 来表示不同的节点类型
        //
        //将NodeList对象转换为数组
        var transNL = Array.prototype.slice.call(nodeList,0);
        // call()方法复习，call(新作用域，参数)，0是传给Array.prototype.slice方法的
        console.log(transNL);
        //以上这些关系指针都是只读的，如果还要操作DOM节点，需要用到一些DOM方法
        var insert = document.querySelector(".para");
        console.log(insert);//实时变化的NodeList~
        var child = document.createElement("p");
        insert.appendChild(child);
        var child2 = document.createTextNode("before ");
        var childp = document.createElement("p");
        childp.appendChild(child2);//最好是这样
        insert.insertBefore(childp,insert.firstChild);
        // insert.replaceChild(newNode,oldNode);  会将被替换的节点从文档树中移除  变成一个孤儿文档
        // insert.removeChild(insert.lastChild);  也是变成孤儿
        // insert.removeChild(childp);

        var clone_deep = insert.cloneNode(true);
        var clone_shallow = insert.cloneNode(false);
        console.log(clone_deep.childNodes);//NodeList(3) 深复制  连带着子节点一起复制
        console.log(clone_shallow.childNodes);//NodeList(0) 浅复制 只复制这个节点

        //normalize()方法  处理空文本节点、并列的两个文本节点

        //document类型
        var html = document.documentElement;
        var body = document.body;
        console.log(html);//给力
        console.log(html.nodeType,html.nodeName,html.nodeValue,html.childNodes);//1 HTML null
        //!返回的NodeList是 head text body  这个text是nodeValue: "↵"，即换行
        console.log(body.childNodes);//text(回车) comment text(回车) comment
        document.title = "New Title";//可读可操作的一个属性
        var url = document.URL;//url
        var domain = document.domain;//域名
        var referer = document.referer;//来源页面的url
        console.log(url,domain,referer);
        //只有domain可以设置 但不可设置为url中不包含的域

        //document对象的特殊集合
        //docuemnt.anchors返回文档中所有带有name特性的<a>元素
        //.forms 文档中所有的form元素
        //.images
        //.links 文档中所有带href特性的a元素



        //Element类型
        //nodeName 与 tagName 两个属性会返回相同的值
        // 操作特性的三个DOM方法  详见DOM编程艺术
        function ale(){
            alert("siguoyi");
        }
        var btn = document.getElementsByTagName("button")[0];
        console.log(btn.getAttribute("style"));//background-color:lightskyblue;
        console.log(btn.style);//CSSStyleDeclaration (只是行内样式)返回一个对象 并没有映射到style特性
        console.log(btn.getAttribute("onclick"));//ale()
        console.log(btn.onclick);//ƒ onclick(event) {ale()}
        //所以通常不使用getA方法

        btn.setAttribute("background-color","white");//错误
        btn.setAttribute("style","background-color:white;");//正确

        //createA方法：
        var newAttr = document.createAttribute("alt");
        //Attr对象的value与nodeValue相等  
        newAttr.value = "none";
        btn.setAttributeNode(newAttr);
        // 要将新特性添加到元素中必须使用该方法
        console.log(btn.attributes["alt"].value);//none
        console.log(btn.getAttributeNode("alt").value);//none

        //这两个返回对应特性的Attr结点
        console.log(btn.getAttribute("alt"));//none
        //只返回对应特性的值
        //Attr、Text、Comment、CDATASection、DF、DT等先忽略
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/linbudu/p/10529869.html

aozhou9334

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高程三 DOM对象

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title>...
复制链接

扫一扫