前端基础之JavaScript_(5)_DOM对象总结

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

访问（查找标签）

//---- 直接查找
    document.getElementById(“idname”)
    document.getElementsByTagName(“tagname”)
    document.getElementsByName(“name”)
    document.getElementsByClassName(“name”)

//---- 导航属性
    NodeElement.parentElement                         // 父节点标签元素
    NodeElement.children                                 // 所有子标签
    NodeElement.firstElementChild                   // 第一个子标签元素
    NodeElement.lastElementChild                  // 最后一个子标签元素
    NodeElement.nextElementtSibling            // 下一个兄弟标签元素
    NodeElement.previousElementSibling      // 上一个兄弟标签元素

　　

操作标签:

1 文本操作

取值操作

element.innerHTML (关于标签的操作)
element.innerText （关于文本操作）

　　赋值操作：

element.innerHTML=""
element.innerText=""

2 属性操作

　　取属性值： （1）element.getAttribute(属性名)
　　　　　　　（2）element.属性名 （推荐）

　　赋值操作： （1）element.setAttribute(属性名，属性值)
　　　　　　　（2）element.属性名=属性值
　　针对class属性：
　　　　（1） element.classlist.add("class值")
　　　　（2） element.classlist.remove("class值")

　　关于select标签：
　　　　ele_select.options.length=0 清空操作
　　　　ele_select.selectedIndex 选中option的索引值

　　关于style属性：实现对标签的css操作：
　　　　element.style.样式属性="值"

3 节点操作

　　-----添加标签
　　　　生成一个标签：var ele_create=document.createElement("标签名")　　　　// <p></p> <img>

　　　　添加标签： 父标签.appendChild(添加标签对象)
　　　　　　　　　　　　 .insertBefore

　　-----删除节点： 父标签.removeChild(查找到的标签对象)

　　-----替换节点：
　　　　父标签.replaceChild(newnode,查找到的标签对象)

　　----- 拷贝一个节点　　　

　　　　　　要拷贝的标签：ElementNode.cloneNode(true);    // true 为深度拷贝，拷贝ElementNode标签及子标签，不加true为浅拷贝，只拷贝ElementNode标签

DOM：两种绑定事件方式：

//方式1
<script>
        function foo(self){
            alert(123)        // self： <p onclick="foo(this)"></p>
    }
</script>
    <p onclick="foo(this)"></p>

//方式2：
    一个标签对象.on事件=function(){
        alert(456)     // this：绑定事件的标签对象
}

　　

具体事件

点击事件 onclick
获取/失去焦点 onfocus onblur
内容发生变化 onchange (selecte)
onmouse 与鼠标相关的事件
提交事件：onsubmit
加载事件：onload