DOM

第十章 DOM

    一.节点层次

                文档：html页面

                文档对象：页面中的元素

                稳当对象模型：定义 为了能让程序（JS）操作页面中的元素

        1.Node类型

               .childNode.length 子节点个数（只包含一级子节点，不包含孙级）、包含文本元素（如空格换行）和非法嵌套

               .nodeType:判断节点类型

               .attribute:节点属性个数 .attribute[ ].name 属性名称 .attribute[ ].value 属性值

               .children.length:不包含文本元素（如空格换行）、非法嵌套

               .firstChild :标准下：包含文本  非标准：不包含文本

               .firstElementChild:非标准下不支持这个属性

               .lastChild  | |  .lastElementChild: 最后一个子节点，属性同上

               .nextSibling | | .nextElementSibling:下一个兄弟节点

               .previousSibling | | .previousElementSibling:上一个兄弟节点、

               .parentNode:父节点

               .offsetParent：离当前节点最近的有定位属性的节点，如果没有定位父级，默认值Body,ie7以下，如果当前元素没有定位，默认值为BODY，如果有定位，则为htmL

              .offsetLeft/Top:距有定位属性的父节点的距离 

              .style.height/元素的高和宽

              .clientWidth/Height:样式长宽+padding

              .offsetWidth/Height:样式长宽+padding+border可视区+边框

            * 父级.appendChild(要添加的元素) 插入元素

            * 父级.insertBefore(新的元素，被插入的元素)  在指定元素之前插入一个新的元素//在ie下，如果第二个参数节点不存在，会报错，在其他标准浏览器，如果第二个参数节点不存在，则会以appendChild的形式进行插入

            *父级.removeChild(要删除的元素)删除元素

            *父级.repalceChild(替换内容，被替换内容)  替换子节点

            getElementByClassName()；函数

1. var aLi=getElementsByClassName('li_one');
2. alert(aLi.length);
3. // console.log(aLi);
4. function getElementsByClassName(className)
5. {
6. var oAll=document.getElementsByTagName('*');
7. var oArr=[];
8. for(var i=0;i<oAll.length;i++)
9. if(oAll[i].className==className)
10. oArr.push(oAll[i]);
11. return oArr;
12. }

            获取表单数据：

            <form id="form">

                <input type = "  " name = "text1 "></input>

            <form>

                alert(form.text1.value)  ;  

            .onchange();当值发生改变时触发

            .onsubmit();表单提交时触发

            .submit()提交函数

            .onreset():当表单重置时触发

            confirm() 弹出对话框 “确定”为true “取消”为false

1. oForm.onreset=function(){
1. return confirm('确定要重置？');
2. };

 

           1）.nodeName和nodaValue

2.Document类型

        document.documentElement:访问文档节点

        document.body获得body引用

        document.doctype:获得<!DOCTYPE>引用

        *多数情况下，用不着在document对象上调用appendChild();removeChild();replaceChild();因为文档类型是只读的，而且他只能有一个元素子节点，而且这个节点通常已经存在。

        document.title获得title元素（可更改）

        document.URL;获得完整URL

        document.domain;取得域名(可设置,但只能包含于URL，若开始设置省略前置域名（松散型loose），则之后不能再设置成紧绷型（tight）)

        document.referrer;去的来源页面的URL

3.Element特性

        1.取得特性

                操作特性的方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。

        2.设置特性

                div.setAttribute("id", "someOtherId");

                div.setAttribute("class", "ft");

                div.setAttribute("title", "Some other text");

                div.setAttribute("lang","fr");

                div.setAttribute("dir", "rtl"); 

        4.删除属性

                div.removeAttribute("class"); 

        5.Attributes特性

               要取得元素的特性，可以使用以下代码。

                     var id = element.attributes.getNamedItem("id").nodeValue;

               以下是使用方括号语法通过特性名称访问节点的简写方式。

                     var id = element.attributes["id"].nodeValue; 

        6.创建元素

                var div = document.createElement("div");

  4.text类型

          1.创建文本节点

               var textNode = document.createTextNode("<strong>Hello</strong> world!");                     

            2.规范化文本节点

                 normalize();相邻文本节点合并。

           3.分割文本节点

                splitText();

  5.Comment类型

        注释节点。

6.CDATASection类型

7.DocumentType类型

8.DocumentFragment类型

9.Attr类型

    三个属性：name 、value 、specified(区别特性是在代码中指定的还是默认的).

    

1. var attr=document.creatAttribute("align");
2. attr.value="left";
3. element.setAttribuyes(attr);

 

    二.DOM操作技术

            1.动态脚本

             

1. function loadScript(url){
2. script=document.creatRElement("script");
3. script.type="text/javascript";
4. script.src=url;
5. document.body.appendChild(script);

1. }

           2.动态样式    

                    

1. function loadStyles(url){
2. var link=documentElement("link");
3. link.rel="stylesheet";
4. link.type="text/css";
5. link.herf=url;
6. var head=document.getElementByTagName("head")[0];
7. head.appendChild(link);
8. }