前端学习之JavaScript DOM以及DOM操作的基础知识 - 蓝蓝设计_UI设计公司

帝皇彩票官网

前端学习之JavaScript DOM以及DOM操作的基础知识

2020-4-18 前端达人

在了解了javascript的语言基础和特性后

javascript真正大放光彩的地方来了——这就是javascript DOM


Javascript DOM
DOM(Document Object Model),文档对象模型。

是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口;W3C已经定义了一系列DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

简单的说就是一套操作文档内容的方法。

需要注意的是,我们需要把DOM当作一个整体,不能分割看待,即DOM(文档对象模型)是一套操作文档内容的方法。


  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 元素:页面中的所有标签都是元素,DOM中使用element表示
  • 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示

DOM把以上内容看作都是对象

<!DOCTYPE html>
<html>
<head>
    <title>Shopping list</title>
    <meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
    <li>A tin od beans</li>
    <li>Cheese</li>
    <li>Milk</li>
</ul>
</body>
</html>



用树表示这个网页的结构:

aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2ktYmV0YS8xODQ2ODAyLzIwMTkxMi8xODQ2ODAyLTIwMTkxMjIzMTcxMDI5MTY1LTExNTE0OTgxMDMucG5n.jpg

1、获取DOM四种基本方法
1、getElementById()

2、getElementsByTagname()

3、getAttribute()

4、setAttribute()

 

常用的两种解析:

1. getElementById():

参数:元素的ID值。 (元素节点简称元素) 
返回值:一个有指定ID的元素对象(元素是对象) 
注:这个方法是与document对象相关联,只能由document对象调用。 
用法:document.getElementById(Id) 

例:

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <div id="time">2020-04-16</div>
    <script>
        // 1. 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面
        // 2. get 获得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>
 
</html>




看一下控制台打印的是什么

20200416221227181.png


可以看到 console.log(timer)打印出来的是整个div标签

timer类型是个对象

 

2. getElementsByTagName():

参数:元素名
返回值:一个对象数组。这个数组里每个元素都是对象,每个对象分别对应着文档里给定标签的一个元素。
注:这个方法可和一般元素关联。这个方法允许我们把通配符当作它的参数,返回在某份html文档里总共有多少个元素节点。
用法:element.getElementsByTagName(TagName) 

例:

var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12
 

 

2、事件基础
3.1 事件概述
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。

简单理解:触发——>响应机制

网页中每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮产生一个事件,然后去执行某些操作

3.2 事件三要素
事件源 、事件类型、事件处理程序,我们也称为事件三要素

(1) 事件源 事件被触发的对象   谁  
(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
(3) 事件处理程序  通过一个函数赋值的方式 完成

代码实例

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮,弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>
 
</html>


运行结果

20200416223238828.png

3.3 执行事件的步骤

1、获取事件源

2、注册事件(绑定事件)

3、添加事件处理程序(采取函数赋值形式)

 

代码实战


		


<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
 
        }
    </script>
</body>
 
</html>



常用的DOM事件
onclick事件---当用户点击时执行
onload事件---当用户进入时执行
onunload事件---用用户离开时执行
onmouseover事件---当用户鼠标指针移入时执行
onmouseout事件---当用户鼠标指针移出时执行
onmousedown事件---当用户鼠标摁下时执行
onmouseup事件---当用户鼠标松开时执行
 
————————————————
版权声明:本文为CSDN博主「那是我呐」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42402867/article/details/105567787

标签: js

Powered by sitemap
大象彩票APP 吉利彩票投注 桔子彩票登陆 吉利彩票开奖 山东11选5走势 帝皇彩票平台 大象彩票计划 桔子彩票登陆 帝皇彩票官网 博发彩票APP下载