DOM学习之获取元素及事件基础（附实例、源码）

DOM树
获取元素
2.1 根据ID对象
2.2 根据标签名获取
2.3 通过H5新增的方法获取（不考虑兼容用这个最好）
2.4 获取特殊的元素
事件基础
3.1 事件概述
3.2 事件三要素
3.3 事件执行的步骤

正文

DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口

DOM树

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

DOM把以上内容都当做是对象

获取元素

2.1 根据ID对象

使用getelementById获得

参数
element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
返回值
返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

例子：

Console.dir();方法
打印返回的元素对象，更好的查看里面的属性和方法

2.2 根据标签名获取

语法：

var elements = document.getElementsByTagName(name);

elements 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection (但是看下面的提示) 。
name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。

注意:

最新的 W3C 规范说明这些元素是 HTMLCollection（HTML集合）；然而, 这个方法在WebKit内核的浏览器中返回一个 NodeList 。

这样做会获取文档中所有叫这个标签的元素，但是往往我们只要特定的一些，这时，我们要先获取这些元素的父元素再通过ele.getElementsByTagName()的方式获取我们要的

var nav = document.getElementById("nav");
var navList = nav.getElementsByTagName("li");
console.log(navList);

2.3 通过H5新增的方法获取（不考虑兼容用这个最好）

getElementByClassName(‘类名’);

根据类型获取某些元素的集合

var box = document.getElementsByClassName("box");
console.log(box);

结果：

document.querySelector(‘选择器’);

根据指定选择器返回第一个元素对象（注意加符号的记得加符号）

  var firstBox = document.querySelector('.box');console.log(firstBox);

 var nav = document.querySelector('#nav');console.log(nav);

标签

var li = document.querySelector('li');
console.log(li);

3. document.querySelectorAll(‘选择器’);

根据指定选择器返回所有元素对象集合（伪数组）

var allBox = document.querySelectorAll('.box');
console.log(allBox);

2.4 获取特殊的元素

获取body元素

document.body

var bodyEle = document.body;
console.log(bodyEle);

获取HTML元素

document.documentElement

var htmlEle = document.documentElement;
console.log(htmlEle);

事件基础

3.1 事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

简单理解：触发—响应机制。

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

3.2 事件三要素

事件是由三部分组成（事件三要素）事件源事件类型事件处理程序

a.事件源事件被触发的对象谁按钮

b. 事件类型如何触发比如说鼠标点击、鼠标经过

c.事件处理程序通过一个函数赋值的方式完成

例：

    // 匿名函数赋值的方式btn.onclick = function() {alert('点');}

3.3 事件执行的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（添加函数赋值形式）

DOM学习之获取元素及事件基础（附实例、源码）相关推荐

((ios开发学习笔记九)) Simple TableView 实现（附实例源码）
实现效果: 实现过程: Step One 创建单个窗体项目 Step Two 创建control 接口 Step Three 创建窗体和关联关系 Step four 实现table view 的接口 ...
WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
DOM获取元素、事件基础、操作元素、节点操作
什么是DOM? 文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML 或者XML)的标准编程接口. W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式. DO ...
Silverlight实用窍门系列：35.细解Silverlight冒泡路由事件和注册冒泡路由事件【附带实例源码】...
Silverlight中的事件分为普通事件和冒泡路由事件,它并没有包括WPF中的隧道路由事件,在本章中将详细讲解冒泡路由事件和如何注册一个冒泡路由事件. 一.细解冒泡路由事件冒泡路由事件可以比喻为: ...
基于Android实现日语学习app设计与实现演示【附项目源码+论文说明】分享
基于Android实现日语学习app设计与实现演示摘要随着手机使用的普及,人们获取与保存信息的方式已经发生了激动人心的转变.智能手机正在逐步融入我们的生活,并影响和改变着我们的生活.由于现在各种智 ...
基于Android实现日语学习app设计与实现演示【附项目源码+论文说明】
基于Android实现日语学习app设计与实现演示摘要随着手机使用的普及,人们获取与保存信息的方式已经发生了激动人心的转变.智能手机正在逐步融入我们的生活,并影响和改变着我们的生活.由于现在各种智 ...
深入学习Tomcat----自己动手写服务器（附服务器源码）
相信大多Web开发者对Tomcat是非常熟悉的,众所周知Tomcat是一款非常好用的开源Servlet容器,您一定对这个最流行的Servlet容器充满好奇,虽然它并不像一个黑盒子那样让人无法触摸但是T ...
深度学习项目：泰坦尼克号生存预测【附完整源码】
文章目录一.建模基本流程二.结构化数据建模流程 2.1 泰塔尼克号数据 2.2 数据处理 2.3 建立模型 2.4 训练模型 2.5 评估模型 2.6 模型预测 27 保存模型一.建模基本流程 ...
深度学习项目：男女性别识别【附完整源码】
性别分类对于人机交互应用和计算机辅助生理或心理分析等商业领域的许多应用至关重要,因为它包含有关男女特征差异的广泛信息. 本次案例收集了接近二十万的男女数据集图片. 文章目录性别分类简介使用 Pyt ...
【Pygame小游戏】不怕你走不过系列：极致AI走迷宫，学习完带你打开新世界大门~（附游戏源码）
前言

DOM学习之获取元素及事件基础（附实例、源码）

DOM学习之获取元素及事件基础（附实例、源码）相关推荐

最新文章

热门文章