DOM文档对象模型

最新推荐文章于 2024-05-12 16:13:35 发布

夏虫语冰彡

最新推荐文章于 2024-05-12 16:13:35 发布

阅读量159

点赞数

文章标签： dom 标签使用js操作样式 html-dom coredom

本文链接：https://blog.csdn.net/qq_34283987/article/details/77970400

版权

查询

1.通过id、name、class、标签名查。这称为core dom（核心dom）

document.getElementById(“id名”);
document.getElementsByName(“name值”);
document.getElementsByTagName(“div”)//标签div/p/等,*代表查所有标签
document.getElementsByClassName(“类名”);

2.html dom(了解)
访问数组。document.links[0].href 第一个a标签的href属性。
访问表单域。根据表单域的name值/id值。document.form[0].username.value
注意：表单域的name一般不要起成submit,因为form1.submit();是提交表单，起submit相当于属性把方法覆盖了，form1.submit属性把form1.submit()方法覆盖了，js中方法也可以看成属性，只不过方法的属性值是一个函数。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
        window.onload = function(){
            //1.根据id查询
            var div1 = document.getElementById("btn1");
            //2.根据name属性值查询，返回一个数组
            var allObject = document.getElementsByName("div");
            //3.根据类名（样式名）查询，返回一个数组
            var d1 = document.getElementsByClassName("myClass1");
            alert(d1.length);
//          for(var i in d1){
//              alert(d1[i].innerHTML);
//          }
            //4.根据标签名查询，返回一个数组，"*"表示查询全部标签
            var oAllElements = document.getElementsByTagName("*");
            var oAll =document.all;
//          alert(oAll.length);
//          for(var i in oAll){
//              alert(oAll[i]);
//          }
        }

        </script>
    </head>
    <body>
        <div id="div1" class="myClass1">
            我是div1
            <p>nihao</p>
        </div>
        <div id="div2" class="myClass1">
            我是div2
        </div>
        <span id="span1">
            我是span
        </span>
    </body>
</html>

提交表单：
<script type="text/javascript">
            function test () {
                var form1 = document.getElementById("form1");
                form1.action = "查询.html";
                form1.submit();
            }
        </script>
    </head>
    <body>
        <form id="form1" action="" method="post">
            <input type="button"  value="提交" onclick="test();"/>
        </form>

3.通过节点之间的关系查询

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>(c) Copyright 2017 All Rights Reserved. </title>
        <script type="text/javascript">
            window.onload = function () {
                //所有的dom节点都支持这些属性
                //获得文档的根节点，相当于html文档里面的<html>标签
                var root = document.documentElement;
                var div = document.getElementById("test"); //div加载完才能使用
                //Dom的属性 1.nodeName
                //alert(root.nodeName + ":" + div.nodeName);//html:div
                //2.nodeValue获得文本节点中的文本值
                //alert(root.nodeValue + ":" + div.firstChild.nodeValue);
                //3.nodeType有三种,代表1、标签、2、属性、3、文本
                //1:3:2
                //alert(root.nodeType + ":" + div.firstChild.nodeType + ":" + div.getAttributeNode("id").nodeType); //1:3:2
                //4.firstChild得到第一个子节点
                //alert(root.firstChild);
                //5.lastChild得到最后一个子节点
                //alert(root.lastChild);
                //6.childNodes所有子节点
                //7.previousSibling前一个节点
                //8.nextSibling 后一个节点
                var body = document.body;
                //body的第一个子节点可能不是div,是text节点
                var textNode = body.firstChild;
                alert(textNode.nextSibling.innerHTML);
                //9.ownerDocument 获得该节点所属的文档对象
                //alert(root.ownerDocument);
                //10.attributes  得到属性对象的数组  attributes[0] 访问第一个属性
//              var attriArr = div.attributes;
//              alert(attriArr.length);
//              alert(attriArr[0]);//object Attr
            }
        </script>
    </head>
    <body>
        <div id="test">
            div1
        </div>
    </body>
</html>

注：body第一个孩子节点可能是text文本节点.

得到、设置dom对象的属性

1.html dom
对象名.属性名
例：img1.src=”../../路径”;
2.core dom
dom对象.getAttribute(“src”);
dom对象.setAttribute(“src”,属性值);
3.对象名[属性名]
img[“src”]=”“;
如果属性是变量，推荐2、3方式。

<script type="text/javascript">
            window.onload = function () {
                window.setInterval(displayImg,1000);
                function displayImg () {
                    var img1 = document.getElementById("img1");
                    //var i = 1;
                    img1.setAttribute("src","images/future2.jpg");//"+(i++)+"
                }
            }



        </script>
    </head>
    <body>
        <img id="img1" src="images/future1.jpg"/><!--"+i+"-->
    </body>

使用js操作样式

一、修改单一样式
需求：修改style中的背景颜色
通过dom对象.style.属性值修改，注：div.style得到CSS2Properties对象，无法用来修改整个style.

二、修改整套样式
一次性修改50个样式，上述修改方式要50行代码。而修改整套样式，只需要通过className修改样式。
原本样式为class1，设置div1.className=”class2”;
这里写图片描述

夏虫语冰彡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM文档对象模型

查询1.通过id、name、class、标签名查。这称为core dom（核心dom）document.getElementById(“id名”);document.getElementsByName(“name值”);document.getElementsByTagName(“div”)//标签div/p/等,*代表查所有标签document.getElementsByClassName
复制链接

扫一扫