引入:

API

API (应用程序编程接口) 是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节

即 API 是给程序员提供一种工具,以便能更轻松的实现想要完成的功能.

Web API

Web API 是浏览器提供的一套操作浏览器和页面元素的API(BOM和 DOM)

Web API 主要针对浏览器提供的接口,主要针对浏览器做交互效果.

DOM

文档对象模型(DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

DOM树

文档:一个页面就是一个文档 ,DOM 中使用document表示.

元素:页面中的所有标签都是元素,DOM中使用element表示

节点:网页中的所有内容都是节点(标签,属性.文本,注释等),DOM中使用node表示.

获取元素

根据ID获取

使用 getElementById();

注意:1.文档从上往下加载,所以需要先有标签,script写在标签下面

2. get 获得 element 元素 by 通过驼峰命名法;

3.参数 id 是大小写敏感的字符串. 所以需要加单引号

4.返回的是一个元素对象

5.console.dir 打印返回的元素对象,可以更好的查看里面的属性和方法;

<div id = "uname"> 我是花仙子</div>
<script>var lis = document.getElementById('uname');console.log(lis);
</script>

根据标签名获取

使用 getElementsByTagName()方法可以返回带有指定标签名的对象集合

注意 : 1.返回的是获取元素对象的集合以伪数组的形式存储的

2.依次获取里面的元素对象可以采用遍历

3.所得到的元素是动态的.

4.element.getElementsByTagName() 可以得到元素里面的某些标签

<ul><li> Charming Girl one</li><li> Charming Girl two</li><li> Charming Girl three</li>
</ul>
<script>var lis = document.getElementsByTagName('li');console.log(lis);//遍历for(var i = 0;i < lis.length ; i++){console.log(lis[i]);}
</script>

案例: 在多个ul中获取其中一个的li

<ul><li> Charming Girl one</li><li> Charming Girl two</li><li> Charming Girl three</li>
</ul>
<ul class = "boy"><li> Charming Boy one</li><li> Charming Boy two</li><li> Charming Boy three</li>
</ul>
<script>var lis = document.getElementsById('boy');var boylis = lis.getElementsByTagName('li');console.log(boylis);
</script>

通过HTML5新增的方法获取

document.getElementsByClassName('类名');//根据类名返回元素对象集合

document.quarySelector('选择器');// 根据指定选择器返回第一个元素对象

document.quarySelectorAll('选择器')//返回指定选择器的所有元素的集合

<div class = "box">盒子呀 1</div><div class = "box"> 盒子呀 2</div><div id = "nav"><ul><li> 产品</li><li> 首页</li></ul>
</div>
<script>var box = document.getElementsByClassName('box');console.log(box);//两个div.boxvar firstbox = document.querySelector('.box');console.log(firstbox);//第一个 box var nav = document.querySelector('#nav');console.log(nav);//nav里面的所有var lis = document.querySelector('li');console.log(lis);//第一个li var Alis = document.querySelectorAll('li');console.log(Alis);//所有li
</script>

特殊元素获取

1. 获取body 元素

document.body //返回body元素对象

2. 获取html 元素

document.documentElement //返回html元素对象

事件基础

事件 :触发响应的一种机制.

事件由三部分组成(事件三要素):事件源,事件类型,事件处理程序

①事件源 : 事件被触发的对象

②事件类型:如何触发什么事件

③事件处理程序通过一个函数赋值的方式

执行事件的步骤:①获取事件源 ② 注册事件(绑定事件)③添加事件处理程序(采取函数赋值形式)

案例: 点击按钮,弹出对话框

<button id="btn">  告诉你个秘密 ,点一下 ;你就知道</button>
<script>var btn = document.getElementById('btn');btn.onclick = function(){alert('你是猪');}
</script>

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

JavaScript --------WebS APIs学习之DOM(一)相关推荐

JavaScript高级程序设计学习笔记--DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口). Document类型文档的子节点虽然DOM标准规定Document节点的子节点可以是DocumentType,Ele ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）
文章目录系列目录原项目地址第37课:并发编程在爬虫中的应用单线程版本多线程版本异步I/O版本总结第38课:抓取网页动态内容 Selenium 介绍使用Selenium 加载页面查找 ...
『前端学习笔记』 JavaScript 事件与对象、DOM与BOM
参考视频:[极客学院]Web前端开发教学 - 第一部分:H5+CSS+JS 参考文档:JavaScript 教程 W3school 文章目录 DOM对象 HTML DOM 操作HTML 操作CSS E ...
第一百一十四节，JavaScript文档对象，DOM进阶
JavaScript文档对象,DOM进阶学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
javascript的ES6学习总结(第三部分)
1.ES6中的面向对象的类 1.1.定义类在ES5中,我们写一个类,通常是这么写的 function Person(name,age){this.name = name;this.age = age ...
前端之JavaScript第一天学习(1)-JavaScript 简介
javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...
Javascript提升阶段学习
JavaScript 1:javascript简介 JavaScript是一种脚本语言,能实现网页内容的交互显示,当用户在客户端显示该网页时,浏览器就会执行JavaScript程序,用户通过交互的操作 ...

JavaScript --------WebS APIs学习之DOM(一)

API

Web API

DOM

获取元素

事件基础

JavaScript --------WebS APIs学习之DOM(一)相关推荐

最新文章

热门文章