js dom笔记
WebApi
-
API的概念
任何开发语言都有自己的API
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数
目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节 - API的特征输入和输出(I/O)
- API的使用方法(console.log())
Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法),Web API在后面的课程中有其它含义
DOM的概念
文档对象模型(Document Object Model,简称DOM)
文档:一个网页可以称为文档
节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
元素:网页中的标签
属性:标签的属性
DOM经常进行的操作
获取元素
动态创建元素
对元素进行操作(设置其属性或调用其方法)
事件(什么时机做相应的操作)
获取元素
根据id获取元素
document.getElementById(id名)
根据标签名获取元素
document.getElementsByTagName(标签名)
返回的是一个类数组(伪数组)
根据name获取元素
document.getElementsByName(name值)
返回的是一个类数组(伪数组)
根据类名获取元素
document.getElementsByClassName(类名)
返回的是一个类数组(伪数组)
根据选择器获取元素
document.querySelector(选择器) 选择一个,传入id
document.querySelectorAll(选择器) 选择多个,传入类名,标签名等
返回的是一个类数组(伪数组)
事件
触发-响应机制
Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成
事件三要素
事件源:触发(被)事件的元素事件写法
var box = document.getElementById(‘box’)
box.onclick = function() {
console.log(‘代码会在box被点击后执行’)
}
案例
-
点击按钮弹出提示框
属性操作
-
非表单元素的属性
href、title、id、src、className
案例:
点击按钮,切换img标签里的图片
点击按钮显示隐藏div
innerHTML
-
向元素当中添加html内容(生成全部的标签)
innerText
-
向元素当中添加文本内容(不生成标签)
表单元素属性
-
value 用于大部分表单元素的内容获取(option除外)
自定义属性操作
-
getAttribute() 获取标签行内属性
样式操作
使用style方式设置的样式显示在标签行内
var box = document.getElementById(‘box’)
box.style.width = ‘100px’
box.style.height = ‘100px’
box.style.backgroundColor = ‘red’
注意:
通过样式属性设置宽高、位置的属性类型是字符串,需要加上px
类名操作
-
修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById(‘box’)
box.className = ‘clearfix’
- js学习笔记(十三)DOM文档对象模型
- JS学习笔记(六)DOM
- JS DOM编程艺术——图片库优化—— JS学习笔记2015-7-11(第82天)
- js学习笔记——DOM
- js笔记之DOM获取页面元素小练习
- 学习笔记---Javascript - DOM 及 简版JS二级联动
- js学习笔记:DOM——DOM操作技术
- js高级程序设计笔记6--DOM
- 《JS高程(3)》DOM扩展-HTML5-第11章笔记(20)
- js笔记·····DOM(document object model)
- D3.js学习笔记(一)——DOM上的数据绑定
- 原生JS DOM 重点知识笔记(第六期-js动画)
- python学习笔记-Day14 -js/dom/jquery
- 【嘉兴东臣php】JS+DOM+BOM笔记
- JS DOM学习笔记
- 原生JS实现的DOM操作笔记(草稿整理)
- JS DOM编程艺术——显示文献来源链接表—— JS学习笔记2015-7-17(第86天)
- D3.js学习笔记(一)——DOM上的数据绑定
- JavaScript笔记5-JS DOM基础
- 前端笔记4 JS BOM&DOM