js2 dom讲解

标签：页面   nload   event   多个   属性   length   ext   函数   括号   

第一章 标签的查找

1.1直接查找

直接查找标签可以分为三种：

（1）根据类的名称进行查找。这种方式是用的比较广泛的一种，使用方法为：document.getElementsByClassName(“name”)，这种查找的方式找到的对象有一个或多个，所以通常想要具象化出一个对象需要在后面放上一个数字，也就是：document.getElementsByClassName(“name”)[id]，比如：找到类名为dev的第一个标签，使用方法为document.getElementsByClassName(“dev”)[0]。

（2）根据对象id进行查找。使用方法为document.getElementById(“idname”)，因为id是唯一的，所以这种方法找到的对象只有一个，例如：找到id=p1的标签：document.getElementById(“p1”)，这个就表示找到的对象。

（3）根据标签名进行查找。这种方法查到的标签也是一个或多个，使用方法为：document.getElementsByClassName(“name”)，类似于根据类查找，这种方式找到的对象也得后面加一个id，例如：查找第一个div标签：document.getElementsByClassName(“div”)[0]，第二个那么后面的方括号里写1.

1.2导航查找

      通过与正操作的标签的关系的方式进行标签的查找就是导航查找，目前导航查找的方式一般如下：

parentElement // 父节点标签元素

children // 所有子标签

firstElementChild // 第一个子标签元素

lastElementChild // 最后一个子标签元素

nextElementtSibling // 下一个兄弟标签元素

previousElementSibling // 上一个兄弟标签元素

例如：找到当前标签的父标签：

this.parentElement 

第二章 事件

click事件

表示鼠标点击时发生的事件，使用方法一般是对象。onclick=function(){}，例如新增一行表格，可以用如下代码做到：

qian_commit.onclick=function () {
        var tr1=document.createElement("tr");
        for(i=0;i){
            var td1=document.createElement("td");
            console.log(qian_input[i].value);
            td1.innerHTML=qian_input[i].value;
            td1.classList.add("bianji");
            tr1.appendChild(td1);
        };
        var td2=document.createElement("td");
        var button1=document.createElement("button");
        var button2=document.createElement("button");
        button1.innerHTML="保存";
        button2.innerHTML="删除";
        button1.classList.add("edit1");
        button2.classList.add("del1");
        td2.appendChild(button1);
        td2.appendChild(button2);
        tr1.appendChild(td2);
        qian_body[0].appendChild(tr1);
        qian_back[0].style.display="none";
        qian_del.length=qian_del.length+1;
        del();
        edit();
        save();
    };

onload事件

onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.。例如：

hello p

onsubmit事件

当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交。

例如：

还有很多常见的事件：onselect、onchange、onkeydown、onmouseout、onmouseleave等。

js2 dom讲解

标签：页面   nload   event   多个   属性   length   ext   函数   括号   

原文地址：http://www.cnblogs.com/qianmeng/p/7742495.html