JavaScript 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 属性操作 <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

posted @ 2017-08-14 19:39  云养猫  阅读(128)  评论(0编辑  收藏  举报