JS-DOM知识点

js循环:

　　条件循环(推荐方式)

for (var i=0;i<5;i++){
         循环体 
    };   

　　遍历循环:

　　　　遍历"[ ]"时,取出的是索引,遍历"{ }"取出的则是key

for (var i in 遍历对象){
      循环体
}

DOM:

　　DOM定义了访问和操作HTML文档的标准方式。

访问(查找标签)

　　直接查找:

　　　　document.getElementById("id号")

　　　　document.getElementsByClassName("class名")

　　　　document.getElementsByTagName("标签名")

　　　　document.getElementsByName("name属性名")

　　导航属性:

　　　　NodeElement. parentELement　　　　　　　　//父节点标签元素

　　　　NodeELement.children　　　　　　　　　　　//所有子标签

　　　　NodeElement.firstELementChild　　　　　　　　//第一个子标签元素

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

　　　　NodeELement.nextELementSibling　　　　　　//下一个兄弟标签元素

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

操作:

　　文本操作

　　　　取值操作

　　　　　　element.innerHTML        //关于标签的操作

　　　　　　element.innerText　　　 //关于文本的操作

　　　　　　赋值操作:

　　　　　　element.innerHTML=""    

　　　　　　element.innerText="" 

　　属性操作

　　　　取属性值

　　　　　　element.getAttribute(属性名)

　　　　　　element.属性名     //此种方式无法获取自定义属性,一般属性操作推荐这种操作

　　　　赋值操作

　　　　　　element.setAttribute(属性名,属性值)

　　　　　　element.属性名=属性值

　　　　Class属性操作:

　　　　　　element.classlist.add("class值")     //添加class属性

　　　　　　element.classlist.remove("class值")   //移除class属性

　　　　select标签:

　　　　　　ele_select.options.length=0    //清空select下的所有options标签

　　　　　　ele_select.selectedIndex     //选中option的索引值

　　　　style属性:实现对标签的css操作:

　　　　　　element.style.样式属性=值

　　节点操作:

　　　　生成标签

　　　　　　var ele_create=document.createElement("标签类型名")   //创建一个新的标签

　　　　添加标签

　　　　　　父标签.appendchild(新生成的标签名)

　　　　　　　　　  insertBefore     //在标签之前插入新生成的标签

　　　　删除节点:

　　　　　　父标签.removeChild(查找到的标签对象)

　　　　替换节点:

　　　　　　父标签.replaceChild(newNode,查找到的标签对象)

事件的两种绑定方式:

//方式一
<script>
    function foo(){
        alert(123)
}    
</script>

<p onclick="foo()">click</p>    //直接在标签内绑定函数

//方式二
<p id="c1">click</p>
<script>

    var ele=document.getElementById("c1");   //找到标签对象

    ele.onclick=function () {         //使用标签对象事件触发函数执行
        alert(123)
    }
</script>

具体事件:

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。