DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Ching_cl/article/details/49405507

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:返回样式表的集合;