DOM文档对象模型

来源：互联网发布：bm相似度算法编辑：程序博客网时间：2024/06/14 21:59

查询

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