JavaScript DOM大纲

Posted 2020-10-02 云养猫

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 属性操作 <div key1=value1 key2=value2>DIV</div>
取属性值： （1）element.getAttribute(属性名) 。

　　　　　 （2）element.属性名 （推荐）

赋值操作： （1）element.setAttribute(属性名，属性值) 。

　　　　　 （2）element.属性名=属性值

关于class属性：
　　element.classlist.add("class值")
　　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,查找到的标签对象)


----- 拷贝一个节点
　　node.cloneNode(true)　　//true表示同时拷贝子节点

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