JavaScript DOM编程

小灰灰 2021-03-19 14:37 561阅读 0赞

## 一、基础知识点 ##

1、概念：文档对象模型Document  Object  Model，DOM定义了访问和处理HTML文档的标准方法

2、页面加载过程：

浏览器接收到html代码，开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，最后浏览器将渲染树绘制到页面上。构建dom树的过程即根 据html代码自上而下进行构建，当遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上。
![1273347-20171107194136716-355851533.png][]

3、节点

Node：构成HTML文档最基本的单元

分类：

元素节点：HTML标签

属性节点：标签的属性，键值对形式，属性名为键，属性值为值

文本节点：HTML标签中的文本内容

![1273347-20171107194558122-645497020.png][]

4、document对象

document是一个文档节点，代表整个文档，所有节点都是他的后代节点；是window的对象属性，可以直接使用

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

## 二、DOM查询 ##

1、获取文档元素的子节点：

通过document对象调用：

document.getElementById();    通过id属性获取一个元素节点对象

//查找id为bj的节点
    　　　　　　　　　 var btn01=document.getElementById("btn01");
                　　 btn01.οnclick=function(){
                    var btnEle=document.getElementById("bj");
                    alert(btnEle.innerHTML);
                }

document.getElementsByTagName();  通过标签名获取一组元素节点对象

//查找所有li节点
    　　　　　　　　　 var btn02=document.getElementById("btn02");
                　　 btn02.οnclick=function(){
                    var liEles=document.getElementsByTagName("li");
                    for(var i=0;i<liEles.length;i++){
                        alert(liEles[i].innerHTML);
                    }
                }

document.getElementsByName();    通过name属性获取一组元素节点对象

//查找name=genger的所有节点
    　　　　　　　　   var btn03=document.getElementById("btn03");
              　　   btn03.οnclick=function(){
                    var Eles=document.getElementsByName("gender");
                    for(var i=0;i<Eles.length;i++){
                        alert(Eles[i].value);
                    }
                }

2、获取某一元素的子节点

|                         | 类型 | 作用                             |
| ----------------------- | ---- | -------------------------------- |
| getElementsByTagName(); | 方法 | 返回当前节点的指定标签名的子节点 |
| childNodes              | 属性 | 表示当前节点的所有子节点         |
| firstChild              | 属性 | 表示当前节点的第一个子节点       |
| lastChild               | 属性 | 表示当前节点的最后一个子节点     |
| parentNode              | 属性 | 表示当前节点的父节点             |
| previousSibling         | 属性 | 表示当前节点的前一个兄弟节点     |
| nextSibling             | 属性 | 表示当前节点的后一个兄弟节点     |

元素节点的属性：

获取：元素对象.属性名

设置：元素对象.属性名=新的值

其他属性：

nodeValue：元素节点nodeValue属性值为null，文本节点可以通过nodeValue属性获取和设置文本节点的内容

innerHTML：元素节点通过该属性获取和设置标签内部的html代码

3、练习1：

![1273347-20171108151948450-846449964.png][]

封装为按钮绑定事件的方法：

function myQuery(idStr,func){
        var btn=document.getElementById(idStr);
        btn.οnclick=func;
    };

以下代码都写在window.οnlοad=function()\{  \}中

1.查找id为bj的节点

myQuery("btn01",function(){
        var bjEle=document.getElementById("bj");
        alert(bjEle.innerHTML);
    });

2.查找所有li节点

myQuery("btn02",function(){
        var liEles=document.getElementsByTagName("li");
        for(var i=0;i<liEles.length;i++){
            alert(liEles[i].innerHTML);
        }
    });

3.查找name=gender的所有节点

myQuery("btn03",function(){
        var Eles=document.getElementsByName("gender");
        for(var i=0;i<Eles.length;i++){
            alert(Eles[i].value);
        }
    });

4.查找id为city的节点下所有li节点

myQuery("btn04",function(){
        var cityEle=document.getElementById("city")
        var liEles=cityEle.getElementsByTagName("li");
        for(var i=0;i<liEles.length;i++){
            alert(liEles[i].innerHTML);
        }
    });

5.返回id为city的节点的所有子节点

myQuery("btn05",function(){
        var cityEle=document.getElementById("city");
        var allNodes=cityEle.childNodes;
        for(var i=0;i<allNodes.length;i++){
            if(allNodes[i].nodeType==1){
                alert(allNodes[i].innerHTML);
            }
        }
    });

6.返回id为phone的节点的第一个子节点

myQuery("btn06",function(){
        var phoneEle=document.getElementById("phone");
        var currentNode=phone.firstChild;
        while(currentNode.nodeType!=1){
            currentNode=currentNode.nextSibling;
        }
        alert(currentNode.innerHTML);
    });

7.返回id为bj的节点的父节点

myQuery("btn07",function(){
        var bjEle=document.getElementById("bj");
        var parNode=bjEle.parentNode;
        alert(parNode.innerHTML);
    });

8.返回id为android的节点的前一个兄弟节点

myQuery("btn08",function(){
        var andrEle=document.getElementById("android");
        var preNode=andrEle.previousSibling;
        while(preNode.nodeType!=1){
            preNode=preNode.previousSibling;
        }
        alert(preNode.innerHTML);
    });

9.读取id为username的节点的value属性值

myQuery("btn09",function(){
        var userEle=document.getElementById("username");
        alert(userEle.value);
    });

10.设置id为username的节点的value属性值

myQuery("btn10",function(){
        var userEle=document.getElementById("username");
        //userEle.setAttribute("value","邹梦洁");
        userEle.value="邹梦洁";
        alert(userEle.value); 
    });

4、练习2
![1273347-20171108152722434-1202668803.png][]

封装按钮单击事件按钮函数：

function myClick(btnStr,func){
        var btn=document.getElementById(btnStr);
        btn.οnclick=func;
    };

功能实现：

##  三、DOM增删改 ##

| 方法                             | 描述                                             |
| -------------------------------- | ------------------------------------------------ |
| createElement(“元素名”)          | 创建元素节点                                     |
| createAttribute(“属性名”)        | 创建属性节点                                     |
| createTextNode(“文本”)           | 创建文本节点                                     |
| appendChild(新节点)              | 把新的子节点添加到指定节点，通过父节点添加       |
| insertBefore(新节点，指定节点)   | 在指定的子节点前面插入新的子节点，通过父节点插入 |
| removeChild(指定节点)            | 删除子节点，通过父节点删除                       |
| replaceChild(新节点，被替换节点) | 替换子节点，通过父节点替换                       |
| getAttribute(“属性名”)           | 返回指定的属性值                                 |
| setAttribute(“属性名”,“属性值”)  | 把指定属性设置或修改为指定的值                   |

1、练习1

页面：

![1273347-20171109111114138-1129541745.png][]

封装为按钮添加单击事件的方法

function myClick(btnStr,func){
        var btn=document.getElementById(btnStr);
        btn.οnclick=func;
    };

功能实现：

2、练习2

页面：
![1273347-20171109154305544-1785188587.png][]

封装为`<a>`标签添加删除操作的方法：

function adelete(){
        var trEle=this.parentNode.parentNode;  //找到要删除的行
        var firstTd=trEle.getElementsByTagName("td")[0];  //找到行的第一个单元格
        var name=firstTd.innerHTML;    //获取文本内容
        var flag=confirm("你确定要删除"+name+"吗？");  //confirm带有布尔类型的返回值
        if(flag){
            var table=trEle.parentNode;    //找到要删除行的父节点
            table.removeChild(trEle);
        }
        return false;     //a标签onclick事件返回false，取消<a>的默认行为
    };

删除、添加功能

[1273347-20171107194136716-355851533.png]: /images/20210319/1616164652564.png
[1273347-20171107194558122-645497020.png]: /images/20210319/1616164627443.png
[1273347-20171108151948450-846449964.png]: /images/20210319/1616164607419.png
[1273347-20171108152722434-1202668803.png]: /images/20210319/1616164586356.png
[1273347-20171109111114138-1129541745.png]: /images/20210319/1616164553368.png
[1273347-20171109154305544-1785188587.png]: /images/20210319/1616164528004.png