DOM事件概述

DOM(文档对象模型)

1>查找 HTML 元素

找到HTML元素方法:
  • 通过 id 找到 HTML 元素  document.getElementById([idName])
  • 通过标签名找到 HTML 元素 document.getElementByNames([tagName])
  • 通过类名找到 HTML 元素 getElementsByClassName([className])

2>改变HTML

  • document.write() 可用于直接向 HTML 输出流写内容
  • 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
  • 改变 HTML 元素的属性时使用.attribute

3>改变样式

需改变 HTML 元素的样式使用.style.property

4>对事件做出反应

HTML事件:
  • 当用户点击鼠标时 onclick()
  • 当网页已加载时 onload() 和 onunload()
  • 当鼠标移动到元素上时onmouseover() 和 离开元素时onmouseout()
  • 当按下鼠标和释放鼠标onmousedown()、onmouseup()

5>添加和删除节点

  • .创建结点createElement()
  • 创建结点createTextNode()
  • 向元素追加结点appendChild  新创建的元素需向原有元素追加
  • 删除已有元素 removeChild()  需清楚所要删除的元素以及其父元素

6>添加监听事件

  • addEventListener() 用于向指定元素添加事件句柄、添加的事件句柄不会覆盖已存在的事件句柄
    element.addEventListener(event, function, useCapture);
    第一个参数是事件的类型 (如 "click" 或 "mousedown").
    第二个参数是事件触发后调用的函数。
    第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
  • 可以向一个元素添加多个事件,同类型的事件句柄。
  • 可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

  • 可以更简单的控制事件(冒泡与捕获)。

  • JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

  • removeEventListener() 移除事件的监听



更多
(参考)http://www.runoob.com/jsref/dom-obj-event.html

示例:

<!--HTML-->
<h4>DOM(文档对象模型)基本操作</h4>

<ol id="parent">

    <li id="list1" onclick = "getInfo()">点击获取HTML元素</li>
    <li id="list2" onclick = "changeInfo()">点击改变HTML内容</li>
    <li id="list3" style = "background-color: #00CCFF;font-size: 15px" onclick = "changeStyle()">点击改变样式</li>
    <li id="list4" onclick = "addNode()">点击添加节点</li>
    <li id="list5" onclick = "deletNode()">点击删除节点</li>
</ol>

<p> 对事件做出反应</p>
<div id="block1" style="background-color: indianred;height: 100px;width: 100px;margin-top: 50px" onmouseover="mOver(this)" onmouseout="mOut(this)">我是第一块</div>
<div id="block2" style="background-color: darkseagreen;height: 100px;width: 100px;margin-top: 50px" onmousedown="mDown(this)" onmouseup="mUp(this)">我是第二块</div>

<!--script-->
<script>
    function getInfo() {
        var node = document.getElementById("list1");
        alert(node.nodeName);
    }

    function changeInfo() {
        var element = document.getElementById("list2");
        element.innerHTML = "这是改变之后的内容";
    }

    function changeStyle() {
        var cNode = document.getElementById("list3");
        cNode.style.height = "50px";
    }

    function addNode(){
        var fNode = document.getElementById("parent");
        var newNode = document.createElement("li");
        var text = document.createTextNode("这是新的");

        newNode.appendChild(text);
        fNode.appendChild(newNode);
    }

    function deletNode() {
        var fNode = document.getElementById("parent");
        var child = document.getElementById("list5");

        fNode.removeChild(child);
    }

    function mOver(obj){
        obj.innerHTML = "鼠标移上来的时候是这样的嘿嘿嘿";
    }
    function mOut(obj) {
        obj.innerHTML = "我是第一块";
    }

    function mDown(obj) {
        obj.innerHTML = "鼠标按下我是这样的嘿嘿嘿";
    }
    function mUp(obj) {
        obj.innerHTML = "我是第二块";
    }
</script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,060评论 1 10
  • 问答 一、dom对象的innerText和innerHTML有什么区别? innerTextinnerText是一...
    婷楼沐熙阅读 420评论 0 0
  • HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。如下的代码: 点击文本,文字会变...
    路墨阅读 375评论 0 2
  • 1.dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性。将写入的内容...
    candy252324阅读 548评论 0 0
  • 小巷 宁静又幽深 布满苔藓的青石板 照不出黄昏 那个雨季已渐渐遥远 油纸伞和女孩的样子 越来越模糊不清 而我 依旧...
    野渡best阅读 333评论 0 0