JavaScript DOM介绍

Posted zero1230

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript DOM介绍相关的知识,希望对你有一定的参考价值。

DOM

概念

所谓DOM,全称 Docuemnt Object Model 文档对象模型,毫无疑问,此时要操作对象,什么对象?文档对象

在文档中一切皆对象,比如html,body,div,p等等都看做对象,那么我们如何来点击某个盒子让它变色呢?

DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

解析过程

HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树(一切皆是节点)

整个html文档就是一个文档节点。所有的节点都是Object。

DOM可以做什么
  • 找对象(元素节点)
  • 设置元素的属性值
  • 设置元素的样式
  • 动态创建和删除元素
  • 事件的触发响应:事件源、事件、事件的驱动程序
清楚DOM的结构
  • 获取文档对象:document
  • 获取html:document.documentElement
  • 获取body: document.body
获取其它DOM(事件源)的三种方式
var oDiv1 = document.getElementById("box1");      //方式一:通过id获取单个标签

var oDiv2 = document.getElementsByTagName("div")[0];     //方式二:通过 标签名 获得 标签数组

var oDiv3 = document.getElementsByClassName("box")[0];  //方式三:通过 类名 获得 标签数组 
事件
JS是事件驱动为核心的一门语言
事件的三要素

事件的三要素:事件源、事件、事件驱动程序。

比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯的开和关。

再比如,网页上弹出一个广告,我点击右上角的X,广告就关闭了。这件事情里,事件源是:X。事件是:onclick。事件驱动程序是:广告关闭了。

谁引发的后续事件,谁就是事件源。

总结如下:

  • 事件源:引发后续事件的html标签。
  • 事件:js已经定义好了
  • 事件驱动程序:对样式和html的操作。也就是DOM。

    代码书写步骤如下:

  • (1)获取事件源:document.getElementById(“box”); //类似与ios语言的UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

  • (2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };

  • (3)书写事件驱动程序:关于DOM的操作

  • 绑定事件的方式
    直接绑定匿名函数
     var oDiv = document.getElementById("box");
        oDiv.onclick = function () {
            alert("我是弹出的");
        };
    
    先单独定义函数,再绑定
     var oDiv = document.getElementById("box");
        oDiv.onclick = fn;   //注意,这里是fn
        //单独定义函数
        function fn() {
            alert("我是弹出的内容");
        };

 

行内绑定

 

<!--行内绑定-->
<div id="box" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>

 

以上是关于JavaScript DOM介绍的主要内容,如果未能解决你的问题,请参考以下文章

更改页面javascript代码(TamperMonkey)以将键盘笔触发送到父DOM

48个值得掌握的JavaScript代码片段(上)

jQuery简单介绍及基本用法(选择器&DOM操作)

JavaScript入门学习之四——DOM介绍及常用方法

保留对附加节点 javascript 的引用

DOM XSS的三种常见案例介绍