dom对象_02

来源：互联网发布：c语言最长升序片段编辑：程序博客网时间：2024/06/07 20:02

1.dom对象(文档对象模型)

注:  HTML Dom定义了用于HTML的一系列标准的对象,        以及访问和处理HTML文档的标准方法.通过dom可以访问所有的HTML元素,        连同他们所包含的文本和属性,可以对其中的内容进行修改和删除同时,        也可以创建新的元素.                属性:                    1.document.title; //返回当前文档的标题.                    2.document.url; //返回文档的完整性URL.                    3.document.bgcolor ="red";//背景色.                        4.document.fgcolor = "blue"//前景色(也就是字体的颜色).

2.方法:

    1.document.getElementById("elementid ");    //返回对有指定ID的第一个对象引用,如果没有指定ID的元素返回为null;    2.document.getElementByTagName(tagname);    //返回带有指定标签的对象集合,参数值"*"返回文档所有元素,返回的集合对象拥有length属性并且可以通过index来访问集合中的元素.       3.document.getElementByname("name");    //返回有指定名称的对象集合,存在兼容性问题(并且这个方法一般适用于表单操作,在IE中,如果name在form表单中,name可以正常使用,如果出现在DIV元素中那么不能正常返回值,原因是name并不是div的标准属性,chrome和Firefox可兼容).    4.document.getElementByClassName("classname");    //返回文档中所指定的类名的元素集合,并且返回的 对象集合拥有length属性和可通过index来访问集合中的元素,存在兼容性问题FF ,谷歌浏览器支持该方法,IE不支持:     解决方法:    (        function getElsByClassName(className){ //封装一个函数方法            var all =[]; //定义一个数组            if(document.getElementsByClassName){ //首先判断是不是非IE浏览器                return document.getElementsByClassName(className); //如果成立直接执行这块输出这个className;             }else{                var all = document.getElementsByClassName("*"); //如果不成立执行下面这个兼容IE的方法;首先找到我们整个HTML中所有的元素.                for (var i =0; i <all.length; i++){ //用for循环找出 all里面的每一个元素中的值.                    if(all[i].className == className){ //在进行all[i]每个值与我们传入的参数是否匹配;                        arr.push(all[i]); //匹配成功就push到我们定义的数组中.                    }                }                return all;//最后输出            }        }                window.onload = function(){                    var divs = getElsByClassName("div1");                    alert(divs.length);                }                <body>                <div class="div1"></div>                </body>                    )

3.对象集合:

    1.document.all //所有对象集合,all常用来做兼容判断;        例子:if(document.all){                alert("IE");            }else{                alert("not ie");                                }    2.document.forms.length //获取表单的方法:        1.document.forms[0];根据index获取;        2.document.forms["forms1"] //forms表示表单里name的值;          3.直接document.name的值来获取;            document.form1;            console.log(document.forms),name[0],value);            console.log(document.form[0],name,value);                //获取表单元素的方法;

4.操作元素的内容;

    1.<div id="div1">测试数据</div>        innerHTMl:设置或获取的标签对中的元素所有内容,包括标签;        var div1 = document.getelementById("div1");             console.log(div1.innerHTML);    2.innerText:获取文字内容(IE),tetxcontent;获取文字内容(ff.chrom);            alert(div1.innerTexe); IE中;            console.log(div1.textcontent);

5.属性操作;

        1.直接操作: object.attr = value(获取和设置);        2.方法:获取:object.getAttribute("attr");            设置:对象.setAttribute("attr","value");

6.行内样式操作;

        1.div1.style.width = 100px;        2.div1.style.height = 100px;        3.div1.style.border = "1px solid red";        4.div1.style.color = "white";        5.div1.style.background = "blue";        6.console.log(div1.style.width = parseInt(div1.style.width)+100+"px");

7.(hover类似)

1.onmouseover(鼠标移入事件);2.onmouseout(鼠标移出事件);3.div1.style.cursor = "pointer"鼠标移入时变成小手;

8.css层叠样式:

    通过className改修样式,    document.stylesheet[1].rules[1]//IE CHROM.style.width;    document.stylesheet[1].cssrules[1].style.width;    document.stylesheet:返回样式表的集合;

1 0