JavaScript笔记之二：DOM-BOM
WebAPI
web APIs是W3C的标准 主要学习DOM BOM
页面交互
API（应用程序编程接口）是一些预先定义的函数，方便用，不需要理解
web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM）
DOM
DOM（文档对象模型），是W3C组织推荐的处理可扩展标记语言（HTML/XML）的标准编程接口。
已经定义了有一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
DOM树
一个页面就是一个文档 document
页面中的所有标签都是元素 element
网页中所有的内容都是节点 node
DOM把以上内容都看成对象
DOM使得HTML形成一颗DOM树，包含文档、元素、节点
获取元素
DOM主要来操作元素
获取页面中的元素：
根据ID获取
getElementById()var element = document.getElementById(id) // 返回的是一个元素对象根据标签名获取
getElementsByTagName()var element = document.getElementsByTagName()返回的是获取元素对象的集合，伪数组形式存储
通过HTML5新增的方法
getElementsByClassName()根据类名获得某些元素集合querySelector()返回指定选择器的第一个对象 选择器需要加符号（.box #nav）querySelectorAll()返回指定选择器的所有元素对象特殊元素获取
//1. 获取body元素var a = document.body;//2. 获取html元素var b = document.documentElement;
DOM事件
JavaScript可以创建动态页面，事件是可以被JavaScript侦测到的行为
网页中每个元素都可以产生触发JavaScript的事件
事件三要素
事件源
一个对象
var a = document.getElementById('id');
事件类型
如何触发 点击还是经过
事件处理程序
一个函数赋值的方式
// 对象元素+动作函数 = 自定义函数()
a.onclick = function(){// code
}
DOM事件
| 事件 | 触发条件 |
|---|---|
| onload 和 onunload | 用户进入或离开页面时 |
| onclick | 鼠标点击 |
| onmouseover | 鼠标移动到触发 |
| onmouseout | 鼠标离开触发 |
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
节点
节点操作还是为了获取元素
DOM获取元素：
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector
逻辑性不强，繁琐
利用节点层次关系获取元素
- 利用父子兄节点关系获取元素
逻辑性强，简单，兼容性差
什么是节点？
网页中所有的内容都是节点（标签，属性，文本，注释）
在DOM中，节点用node来表示
HTML DOM树中所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，创建，删除
一般，节点至少拥有nodeType（节点类型） nodeName（节点名称） nodeValue（节点值）
- 元素节点 nodeType = 1
- 属性节点 nodeType = 2
- 文本节点 nodeType = 3 （文字，空格，换行）
实际开发中，主要还是元素节点（即标签）
节点操作
1）父级节点
子节点.parentNode
- 得到的是离元素最近的父级节点
- 如果找不到，就返回null
2）子节点
父节点.childNodes
- 返回所有的子节点，包括元素和文本
父节点.children
- 只返回子元素节点
父节点.firstChild
- 返回第一个子节点，包含所有节点
父节点.lastChild
- 返回最后一个子节点，同上
父节点.firstElementChild
- 返回第一个子元素节点，last 同理
- 兼容性问题，IE9+支持
3）兄弟节点
节点.nextSibling
…
4）创建节点
document.createElement('tagName')
动态创建
5）删除节点
node.removeChild(child)
阻止链接跳转：<a href='javascript:;'>abc</a>
这个很重要，比如你要做一个按钮，点击后打开或者关闭某个盒子，我们把按钮做成a的样式，是为了鼠标有点击的效果（不然鼠标以为是文字，虽然能点击，但交互性不好）。
设置成a后一定要阻止链接跳转！因为这样才不会刷新，一刷新就又恢复了，就会造成一闪而过的情况。
<a id="log" href="javascript:void(0);">登录</a>
我的总结：
- 链接为真，点击后页面会刷新，跳转到新的页面。
- 链接为假，点击后不刷新，执行我们的 JS 效果。
6）克隆节点
节点.cloneNode()
如果括号参数为空或者false，则是浅拷贝，只克隆节点本身，不克隆里面的子节点。
括号为true，是深拷贝，复制标签+内容
三种动态创建元素区别
document.write()element.innerHTMLdocument.createElement()
区别
document.write()直接将内容写入页面的内容流。当文档流执行完毕，会导致页面全部重绘。
element.innerHTML将内容写入某个DOM节点，不会导致页面重绘。
document.createElement()创建多个元素结构清晰。
DOM核心
DOM是属于编程接口，获取过来的DOM元素是一个对象
DOM主要就是对元素的操作：创建、增删查改、属性、事件
创建
- document.write()
- element.innerHTML
- document.createElement()
增
appendChild
insertBefore
删
- removeChild
改
- 修改元素属性：src href title
- 修改普通元素内容：innerHTML innerText
- 修改表单元素：value type disabled
- 修改元素样式：style className
查
获取查询dom的元素
- DOM的API：getElementById getElementsByTagName
- H5：querySelector querySelectorAll
- 利用节点操作：父子兄
属性操作（主要针对自定义属性）
- setAttribute：设置DOM的属性值
- getAttribute：得到DOM的属性值
- removeAttribute：移出属性值
事件操作（事件源.事件类型 = 函数程序）
鼠标事件、键盘。。
改变元素内容
获取一个元素的对象，给他一个操作函数，去改变另一个元素的值
innerText
innerHTML
案例：按钮显示当前时间
<body><button>显示当前系统时间</button><div>某个时间</div><script>// 获取元素var btn = document.querySelector('button');var div = document.querySelector('div');// 注册事件 (元素+操作指令+定义函数)btn.onclick = function () {div.innerText = get_the_data();}// 获取时间函数function get_the_data() {var data = new Date();var year = data.getFullYear(); //返回年份var month = data.getMonth() + 1; //返回月份，但是0开头var dates = data.getDate(); //返回几号var arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];var day = data.getDay(); //周一返回1，周六返回6，周日返回0return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];}</script></body>
案例：切换密码栏输入密码是否可见
<body><div class="box"> <input type="password"></div><button>code</button><script>var btn = document.querySelector('button');var pwd = document.querySelector('input')var flag = 0;btn.onclick = function(){if (flag == 0){pwd.type = 'text'; flag = 1; }else{pwd.type = 'password';flag = 0;}}</script>
</body>
操作元素总结
操作元素
操作元素内容
innerTextinnerHTML
操作元素属性
srchreftitlealt
操作表单元素属性
typevaluedisabled
（普通盒子里面的文字是用innerHTML来修改，表单里面的文字用value来改）
操作元素样式属性
element.style（少）className（多）
案例：换背景壁纸
四个图片小图排成一起，每点击一张图片，就把body的背景图片换成这张壁纸
<style>body {background: url("/img/bc1.jpg") no-repeat center top;}
</style><body><ul class="baidu"><li><img src="/img/bc1.jpg" alt=""></li><li><img src="/img/bc2.jpg" alt=""></li><li><img src="/img/bc3.jpg" alt=""></li><li><img src="/img/bc4.jpg" alt=""></li></ul><script>// 获取元素 取出ul img里面的所有图片var imgs = document.querySelector('.baidu').querySelectorAll('img');// 遍历所有图片，添加点击事件，把当前(this)的图片地址加到body里面for (var i=0; i<imgs.length; i++){imgs[i].onclick = function(){// this.src就是我们点击图片的路径document.body.style.backgroundImage = 'url('+this.src+')';}}</script>
</body>
案例：列表的全选与反全选
// jall是表头复选框input的id
// jtb是表身的id
var jall = document.getElementById('jall'); //上面的全选按钮
var jtb = document.getElementById('jtb').getElementsByTagName('input'); //下面的所有的复选框jall.onclick = function(){for(var i=0; i<jtb.length; i++){jtb[i].checked = this.checked;}
}for(var i=0; i<jtb.length; i++){jtb[i].onclick = function(){var flag = true;for(var i=0; i<jtb.length; i++){if(!jtb[i].checked){flag = false;}}jall.checked = flag;}
}
监听事件(注册&解绑)
addEventListener() 方法
添加当用户点击按钮时触发的事件监听器：
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法为指定元素指定事件处理程序。
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
能够向一个元素添加多个事件处理程序。
能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。
能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
举例：此示例使用 addEventListener() 方法将 click 事件（显示当前时间）附加到按钮。
<button id="myBtn">试一试</button><p id="demo"></p><script>document.getElementById("myBtn").addEventListener("click", displayDate);function displayDate() {document.getElementById("demo").innerHTML = Date();}
</script>注意，这里不能使用匿名函数的方式，要把函数名明确的显示出来，方便调用。调用的时候不用加引号。
但是要用也是可以的，比如
element.addEventListener("click", function(){ alert("Hello World!"); });
语法
element.addEventListener(event, function, useCapture);
- 第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
- 第二个参数是当事件发生时我们需要调用的函数。
- 第三个参数是布尔值，指定使用
事件冒泡(false)还是事件捕获(true)。此参数是可选的。
注意： 请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。
DOM事件流
事件流描述的是从页面中接受事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
三个阶段
捕获阶段 从上往下 顶层到底层
当前目标阶段
冒泡阶段 从下往上 底层到顶层
JS只能得到其中一个阶段，通过设定布尔值，让父子关系的盒子事件有一个先后顺序。
实际开发中更关注事件冒泡
有些事件是没有冒泡的：onblur onfocus
事件对象
什么是事件对象？
var j = document.querySelector('div');
j.onclick = function(event){};
event就是一个事件对象，写到监听函数小括号里面
onclick是事件（鼠标事件、键盘事件），event是事件对象
事件对象是事件的一系列相关数据的集合
查看事件对象
j.addEventListener('click', function(e){console.log(e);
})
e里面就包含了鼠标点击的一系列信息
兼容性问题：
IE 678 通过window.event获取
console.log(window.event)
兼容写法：e = e ||window.event
事件对象的常用属性和方法
| 事件对象属性方法 | 说明 | 兼容问题 |
|---|---|---|
| e.target | 返回触发事件的对象 | 标准 |
| e.srcElement | 返回触发事件的对象 | 非标准 ie6-8使用 |
| e.type | 返回事件的类型，比如click mouseover | 不带on |
| e.cancelBubble | 改属性阻止冒泡 | 非标准 ie6-8使用 |
| e.returnValue | 该属性阻止默认事件，比如不让链接跳转 | 非标准 ie6-8使用 |
| e.preventDefault() | 该方法阻止默认事件，比如不让链接跳转 | 标准 |
| e.stopPropagation() | 该方法阻止冒泡 | 标准 |
this 和 target
- 给谁绑定事件，this就指向谁
- 我们点击哪个对象，（这个元素没有绑定事件，但是可以冒泡排上去），指向的就是这个对象元素
阻止冒泡
冒泡有好处，也有坏处
div.addEventListener('click', function(e){...e.stopPropagation();
}, false);
事件委托
也称事件代理，在jQ中称为事件委派
事件委托的原理：
不是每个子节点单独设置事件监听器，而是监听器设置在父节点上，然后利用冒泡原理影响每个子节点。
作用是 只操作一次DOM，提高性能
我们在父节点上注册事件，但我们点击的是自节点。我们想改变点击的子节点的样式，可以用event.target来做
禁用选项
禁用右键菜单
document.addEventListener('contextmenu', function(e){e.preventDefault();
})
禁用鼠标选中文字
document.addEventListener('selectstart', function(e){e.preventDefault();
})
鼠标事件对象
键盘事件对象
获得焦点
focus()
案例：按下s键，搜索框获得焦点
<body><input type='text'><script>var search = document.querySelector('input');document.addEventListener('keyup', function(){if(e.keyCode === 83){search.focus();}})</script>
</body>
注意keyup keydown的区别
NOTE：keydown和keypress在文本框里面的特点：他们两个ssh事件触发的时候，文字还没有落入文本框中。keyup触发时文字已经进去了
H5自定义属性
保存并使用数据，数据保存到页面中而不是数据库中
通过 getAttribute('属性') 获取
H5规范：data- 开头
H5新增：element.dataset.index ie11才支持
表单验证
浏览器对象模型(Browser Object Model)是语言核心和DOM之间的一个过渡层,这个过渡层特指Javascript的客户端实现,它的主要任务是管理浏览器窗口并使得它们可以彼此通信.win ... 一.Web API先导 1.1 JS的组成 JavaScript:ECMAscript(JS语法).DOM(页面文档对象模型).BOM(浏览器对象模型).Web API由后两个 ... JS的对象 string对象 属性 length 方法 与html有关的方法 bold方法fontcolorsubsup 与java类似的方法 concatcharat 返回指定位置字符串indexo ... JavaScript笔记(二) 读书笔记 HTML中的JavaScript 内容概要 2.1 <\script\>元素 2.1.1 标签位置 2.1.2 推迟执行脚本 2.1.3 异步执行 ... JavaScript(简称"JS")是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言.虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中, ... JavaScript 学习笔记(二) 文章目录 JavaScript 学习笔记(二) 一 JSON 1. JSON 对象 什么是JSON对象 JSON对象与Javascript对象的区别 在JavaS ... javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ... JavaScript学习(二十)-DOM中常用的属性 1.clientWidth属性 作用:获取元素或页面的可视的区域的宽度 格式:节点.clientWidth 2.clientHeight属性 作用 ... 教程地址:https://www.bilibili.com/video/BV1k4411w7sV 中文文档:https://developer.mozilla.org/zh-CN/docs/Web/A ...JavaScript笔记之二：DOM-BOM相关推荐
最新文章
热门文章