js基础-DOM基础

一.  DOM

a)    DOM是什么:

   i.  DOM的全称是(Document Object Model)文档对象模型

b)    DOM的作用:

   i.  定义了一堆用其他语言(js、c#)来操作DOM节点(html元素)的API(应用编程接口,方法和属性,函数)

二.  DOM节点

a)    DOM节点是什么?

  i. HTML元素

b)    DOM节点之间的关系?

 i. Html为根节点

  ii. 父元素为父节点,子元素为子节点,相邻元素为兄弟节点

三.  DOM事件处理程序

a)    DOM使JavaScript有能力对html事件作出反应.

b)    DOM节点能绑定html事件

c)    常用html事件:

   i. onclick鼠标点击

   ii. onmouseover鼠标移上

  iii. onmouseout鼠标移出

   iv.onblur失去焦点

  v.onfocus获取焦点

四.  操作DOM节点的流程

a)    获取DOM节点

   i. 根据html的id属性来获取节点

1.    document.getElementById(“id值”);

   ii. 根据html标签名获取节点

1.    Document.getElementsByTagName(‘标签名’)

iii.根据选择器选择元素

通过class查找节点，ie8不支持

// document.getElementsByClassName("box")[0].innerHTML = "哈哈哈";

// 通过自定义函数getByClass查找节点

function getByClass(oParent,sClass){

var aLi = oParent.getElementsByTagName("*");

var aArr = [];

for(var key in aLi){

if (aLi[key].className == 'box'){

aArr.push(aLi[key]);

}

}

return aArr;

}

1. querySelector：通过选择器选择元素，如果返回的是类数组对象，返回第一个元素（IE8+）

2. querySelectorAll：通过选择器选择元素，返回所有元素。（IE8+）

b)    为DOM节点绑定事件

    i.  oDiv.onclick = function(){}

     ii.  oDiv为节点，onclick为dom事件，function(){}为事件处理程序的回调函数，也就是节点点击后的回调函数

c)    操作DOM（html）属性（DOM节点 = html元素 = 元素对象）

      i.  获取节点属性值：节点对象.属性名称

      ii.设置节点属性值：节点对象.属性名称 = 新属性值

      iii. 练习1：网页换肤（操作link节点的href属性）

        // 1、获取DOM节点
        var OBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oLink=document.getElementById("link1");
        // 2.为DOM节点绑定html事件
        OBtn1.οnclick=function(){
        // 3.操作DOM属性
        //设置节点属性值：节点对象.属性名称 = 新属性值
            oLink.href='css/css1.css';
        }
        oBtn2.οnclick=function(){
            oLink.href='css/css2.css';
        }

     iv. 练习2：图片切换（操作img节点的src属性）

        var oBox=document.getElementById("box");
        var oSilder=document.getElementById("silder");
        var oImg=oSilder.getElementsByTagName("img");

       for(var i=0;i

       v. 练习3：输入框值的去除与还原(操作input的value属性)

 var oInput=document.getElementById("input");
       oInput.οnfοcus=function(){
           this.value='';
           console.log(oInput.value);
       }
       oInput.οnblur=function(){
           this.value='请输入你要搜索的关键字';
           console.log(oInput.value);
       }

      vi.  练习4：选项卡（操作style属性的display值）

         var oBtnList=document.getElementById("btn-list");
        var oBtn=oBtnList.getElementsByTagName("li");
        var oBoxList=document.getElementById("box-list");
        var oBox=oBoxList.getElementsByTagName("li");
        
        for(var i=0;i

d)    节点的其他操作：对节点进行创建、添加、删除、替换

  i.   创建：document.createElement(元素名称);

   ii.   添加：

        1.    往父节点里添加子节点

        a)    父节点.appendChild(子节点);

        2.    在兄弟节点之前添加新兄弟节点

        a)    父节点. insertBefore(新节点,兄弟节点)

  iii.   删除：

        1.    在父节点中删除子节点

        a)    父节点.removeChild(子节点);

  iv.   替换：用新节点替换旧节点

    1.    父节点.replaceChild(新节点,旧节点);

e) 操作节点的内容：
    i. innerHTML:直接替换节点里原有的内容
    ii. 练习6：渲染后台数据

    1.字符串模板：当字符串中有html元素，将字符串插入到真实父节点中，字符串中的元素就会变成真实的节点。

 

        

            

                
姓名
                
年龄
                
性别
            
        
        

            

                
小强
                
21
                
男
            
        
    

 //操作节点的内容：
        //innerHTML:直接替换节点里原有的内容
        //1.字符窜模板：当字符窜中有html元素，
        //将字符窜插入到真实父节点中，字符窜中的元素就会变成真实的节点。
        var list = [
            { name: "小明", age: 18, sex: '男' },
            { name: "小芳", age: 12, sex: '女' },
            { name: "小刚", age: 20, sex: '男' },
            { name: "小羊", age: 16, sex: '女' }
        ];
        var oTbody = document.getElementById("list");
        var str = '';
        //通过字符串拼接
        for (var i = 0; i < list.length; i++) {
            str += '' + list[i].name + '' + list[i].age + '' + list[i].sex + '';
        }
        console.log(str);
        oTbody.innerHTML = str;

五、DOM方法

a)    DOM方法：

   i.    可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

    ii.   所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

    iii.   方法是您能够执行的动作（比如添加或修改元素）。

    iv.  属性是您能够获取或设置的值（比如节点的名称或内容）。

    v.  常见DOM方法：

1.    查找节点

a)    getElementById()  返回带有指定ID 的元素，id是唯一，只能查找到第一个带有id名的元素。

b)    getElementsByTagName()     返回包含带有指定标签（元素）名称的所有元素的节点列表（集合/节点数组，类数组对象）。

2.    创建节点

a)    createElement()    创建元素节点。

3.    增加节点

a)    appendChild() 把新的子节点添加到指定父节点的末尾。

b)    insertBefore()  在指定的子节点前面插入新的子节点。

4.    删除节点

a)    removeChild() 删除子节点。

5.    替换节点

a)    replaceChild()  替换子节点。

6.    设置元素内容

a)    innerHTML

7.    设置获取节点属性

a)    getAttribute(name)获取

b)    setAttribute(name, value)设置

8.    设置获取css

a)    Style:获取行内样式，可以设置样式

b)    行外obj.currentStyle[attr]ie（只能获取，不能设置）针对IE

c)    行外getComputedStyle(obj, false)[attr]（只能获取，不能设置）针对其他浏览器

9.    Dom事件

a)    Onclick鼠标点击

b)    onmouseover鼠标移上

c)    onmouseout鼠标移出

d)    onblur失去焦点

e)    onfocus获取焦点

10. DOM二级事件

a)    Obj. attachEvent(‘onclick’,fn)  IE

b)    obj.addEventListener(“click”,fn)   其他浏览器

11. 事件对象：

a)    在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件相关的信息。

12. 事件冒泡

a)    元素->父元素->祖先元素->body->html

b)    取消事件冒泡

     i.  ev.cancelBubble=true;

13. 取消元素默认事件

a)    event.preventDefault();   //非IE浏览器，chrome

b)    return false;  //ie浏览器