DOM学习笔记二

最新推荐文章于 2022-02-21 17:23:53 发布

u013497151

最新推荐文章于 2022-02-21 17:23:53 发布

阅读量1.3k

点赞数

分类专栏： JavaScript Learn_Web

本文链接：https://blog.csdn.net/wjw0130/article/details/41790831

版权

Learn_Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

DOM中document:代表html的文档对象(重要)

document演示:

该对象将标记型文档进行封装
该对象的作用，是对可标记型文档进行操作
常见操作，想要实现动态效果，需要对节点操作，那么先获取到这个节点，想获取节点，就必须先获取节点所属的文档对象document
获取节点的方法体现：
getElementById();提高标签的id属性值获取该标签节点，返回该标签节点
getElementsByName();通过标签的name属性获取节点，返回的是一个数组/容器

getElementsTagName();通过标签名获取节点，因为标签名会有重复，所以返回一个数组

所以，凡是带s的返回的都是一个数组

1.document获取节点byid：（有id的标签）

<body>
    <script type="text/javascript" src="out.js"></script>
    <script type="text/javascript">
        function getNodeDemo(){
            //获取页面中的div节点
            //因为div有id属性，所以可以通过id属性来获取，document对象完成
            var divNode = document.getElementById("divid");
            //节点的必备属性：节点名称nodeName，节点类型nodeType，节点值nodeValue
            //alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
            //常见节点：
            /*
            * 标签型节点： 类型1
            * 属性节点：   类型2
            * 文本节点：  类型3
            *
            * 标签型节点是没有值的，属性和文本节点有值
            * */

            //获取节点后，获取div中的文本
            //var test = divNode.innerHTML;
            //alert(test);

            //改变div中的文本
            divNode.innerHTML = "改变div".fontcolor("blue");
         }
    </script>
    <input type="button" value="document对象获取节点" οnclick="getNodeDemo()"/>
    <div id="divid">div区域</div>
</body>

2.document获取节点byname：（没id，但有name的标签）

通常文本框中的值是不用写的，因为是用户输入

<script type="text/javascript">
       function getNodeNameDemo(){
         var Node = document.getElementsByName("user");//注意是Elements,所以是一组
          /* //alert(Node);//undefined
            //alert(Node.length); 1
           //alert(Node);
           alert(Node[0].nodeName);
           alert(Node[0].type);
           alert(Node[0].value);
           //第二种*/
           for(var i = 0;i<document.getElementsByName("user").length;i++) {
               var userNode = document.getElementsByName("user")[i];
                alert(userNode.nodeName);
           }
       }
    </script>
    <input type="button" value="document对象获取节点" οnclick="getNodeNameDemo()"/>
    <div id="divid">div区域</div>
    <input type="text" name="user" />
    <input type="text" name="user" />
    <input type="text" name="user" />

3。document获取节点byTagname：(没有id，也没有name的标签)

  function getNodeByTagNameDemo(){

            //直接用标签名获取

            var nodes = document.getElementsByTagName("a");
           // alert(nodes.length);//2
            //alert(nodes[0].innerHTML);//获取内部文本，百度1
            for(var i = 0;i<nodes.length;i++){
                alert(nodes[i].innerHTML);
              //  nodes[i].target="_blank";给每个标签的属性设置一个值，有N多个超链接标签时，这招就很实用
            }
        }
    </script>
    <input type="button" value="document对象获取节点" οnclick="getNodeByTagNameDemo()"/>

    <a href="http://www.baidu.com">百度1</a>
    <a href="http://www.baidu.com">百度2</a>

第二种

<script type="text/javascript">

        function getNodeByTagNameDemo2(){
            //对于页面中的超链接，百度链接，在当前窗口打开，163链接在新窗口打开
            //document获取超链接，可以获取页面中所有超链接节点
            //如果需要获取其中某一部分节点，那么就要获取这一部分节点的所属
            //在通过这个节点获取其中的所以超链接节点
                //获取div节点
                var divNode = document.getElementById("newlink");
                //div中有方法,getElementsByTagName,注意凡是容器型标签，其中都有这个方法，但是不一定有
                // byid，byname，但是一定有标签名
                //因为容器型标签中可以装标签
                var nodes = divNode.getElementsByTagName("a");
              //  alert(nodes.length);
                for(var i = 0;i<nodes.length;i++){
                   // alert(nodes[i].innerHTML);
                    nodes[i].target="_blank";
                }
        }
    </script>
    <input type="button" value="document对象获取节点" οnclick="getNodeByTagNameDemo2()"/>

    <a href="http://www.baidu.com">百度1</a>
    <a href="http://www.baidu.com">百度2</a>

    <div id="newlink">
        <a href="http://www.163.com">1631</a>
        <a href="http://www.163.com">1632</a>
        <a href="http://www.163.com">1633</a>
    </div>

u013497151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM学习笔记二

DOM中document:代表html的文档对象(重要)document演示:该对象将标记型文档进行封装该对象的作用，是对可标记型文档进行操作常见操作，想要实现动态效果，需要对节点操作，那么先获取到这个节点，想获取节点，就必须先获取节点所属的文档对象document获取节点的方法体现：getElementById();提高标签的id属性值获取该标签节点，返回
复制链接

扫一扫

专栏目录