webAPI
1-通过DOM节点方式获取元素
1-0注意事项
下面的内容都在在文档树上直接操作的 (节点 + 元素)重点是: 与元素相关的内容
1-1与父节点相关的操作方式
1-1-1.知识点-判断父元素中是否有子节点
语法:
DOM.hasChildNodes();
- 总结:
- 该方法返回的是一个布尔类型的结果
- 该方法会将元素中所有的节点都获取（包括空格，回车符，文字，标签等）
1-1-2.知识点-获取父元素中所有子元素
语法:
DOM.children
- 总结:
- chiledren是一个属性，不是一个方法
- 该属性返回父元素中所有子元素（只包含标签），不包括空格，回车符，纯文本等
- 返回一个伪数组
- 通过dom.children.length来判断是否存在子元素(长度是为0)
1-1-3.知识点-获取父元素中第一个子元素
语法:
DOM.firstElementChild
- 总结:
- 通过该属性可以将父元素中的第一个子元素获取到【标签】
- 该属性只能获取标签，无法获取文字，空格，回车符等节点
1-1-4.知识点-获取父元素中最后一个子元素
语法:
DOM.lastElementChild
- 总结
- 通过该属性可以将父元素中最后一个子元素获取到【标签】
- 该属性只能获取标签，无法获取文字，空格，回车符等节点
1-1-5.知识点-获取父元素中所有子节点(了解)
语法:
DOM.childNodes
- 总结
- childNodes是一个属性，不是一个方法
- 该属性将父元素中所有节点返回（包括回车，空格等特殊符号）
- 该属性将回车符看做是一个空的文本
1-1-6.知识点-获取父元素中第一个子节点(了解)
语法:
DOM.firstChild
- 总结
- 通过该属性可以将父元素中第一个节点得到
- 节点中包括文字，回车符，换行符等
1-1-7.知识点-获取父元素中最后一个子节点(了解)
语法:
DOM.lastChild
- 总结
- 通过该属性将父元素中最后一个节点得到
- 节点中包括文字，回车符，换行符等
1-2与子节点相关的操作方式
1-2-1.知识点-获取上一个兄弟元素
语法:
DOM.previousElementSibling备注:
1. previousElementSibling属性
2. previousElementSibling属性 得到是一个 html 元素
1-2-2.知识点-获取下一个兄弟元素
语法:
DOM.nextElementSibling备注:
1. nextElementSibling属性
2. nextElementSibling属性 得到是与当前元素相邻的一个 html 元素
1-2-3.知识点-获取下一个兄弟节点
语法:
DOM.nextSibling
1-2-4.知识点-获取上一个兄弟节点
语法:
DOM.previousSibling备注:
1.获取的是一个节点(包括html标签, 回车符...)
1-2-5.知识点-根据子节点获取父元素
语法:
DOM.parentNode备注:
1. parentNode 获取当前元素的父元素
1-3节点属性
1-3-1.知识点-获取节点类型
语法:
DOM.nodeType总结:
1. 如果nodeType返回值是1，那么代表当前节点是一个标签
2. 如果nodeType返回值是3，那么代表当前节点是一个文本(包括回车符)
3. 如果nodeType返回值是2，代表标签中的一个属性例如;
// 元素
var div = document.querySelector('div');
// 获取属性
var attr = div.getAttributeNode('id');
//获取文本节点
var text = div.firstChild;
//获取节点类型(了解)
console.log(div.nodeType); //1 ---> 就是一个html标签
console.log(attr.nodeType); //2 ---> 表示的就是标签中的一个属性
console.log(text.nodeType); //3 ---> 表示的就是一个文本节点(回车符)
1-3-2.知识点-获取节点名称
语法:
DOM.nodeName总结:
1. 如果当前对象是一个标签,那么就会将标签的名字以大写的形式展示
2. 如果当前对象是一个属性,那么就会将属性的名字以小写的方式展示
3. 如果当前对象是一个文本节点(回车符), 那么就会返回一个值 #text
2-动态创建元素
-
知识点-通过document.write动态创建元素
document.write('<p>我是一个动态标签</p>');备注: 1. document.write() 中放的都是字符串 2. document.write() 适合创建少量的html元素 -
知识点-通过innerHTMl动态创建元素
DOM.innerHTML = '<p>我是一个动态标签</p>';备注: 1. innerHTML 也是一个字符串 2. 适合创建少量的html元素 -
知识点-通过document.createElement()方式创建元素
-
语法
document.createElement('标签的名字');备注: 1. document.createElement() 写的是标签的名字,不是标签 2. document.createElement() 有返回值,返回值就是创建的标签对象 -
步骤:
-
document.createElement(‘标签名’)
-
通过appendChild(‘子元素’)添加到父元素中
例如; var body = document.querySelector('body'); //2. 如何将创建的元素添加到body父元素中? body.appendChild(div);备注: appendChild() 将新元素追加到父容器的末尾
-
-
-
课堂练习-根据数组动态创建列表
var ary = ['张三', '李四', '王五', '赵六']; -
课堂案例-根据数组动态创建英雄列表
var heads = ['姓名', '年龄', '性别', '学号', '薪资', '城市', '操作']; var datas = [ {name:'欧阳霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'上海'}, {name:'令狐霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'诸葛霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'南京'}, {name:'西门霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'深圳'}, {name:'鸠摩智',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'段延庆',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'段正淳',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'容子矩',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'崔绿华',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'梅超风',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'鲁有脚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'焦木和尚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'韩小莹',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'侯通海',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'欧阳克',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'欧阳峰',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'玄真道人',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'司徒伯雷',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'陈近南',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'张康年',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'吴大鹏',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'西奥图三世',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'任盈盈',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'林远图',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'郑镖头',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'张金鏊',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'陈歪嘴',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'洪人雄',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'余人彦',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'劳德诺',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'玉钟子',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'史镖头',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}, {name:'东方不败',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}];-
移除子元素
父元素.removeChild(子元素);
-
-
课堂案例-动态创建英雄图片
3-其他方式添加元素
-
父节点.insertBefore(“新的节点”,“旧的子节点”)
通过insertBefore可以在父元素中某一个子元素的前面添加一个新元素备注: 1. 如果希望在父元素中的开始位置添加元例如: DOM对象.insertBefore(a, DOM对象.firstElementChild);DOM对象.insertBefore(a, DOM对象.children[0]); -
父节点.replaceChild(“新节点”,“旧节点”)
通过新节点将原来的节点替换掉, 不会保留原来的节点 -
元素.cloneNode(true| false)
false: 默认。只克隆外边的标签 true: 代表克隆元素内部的所有信息 -
课堂案例-微博案例
-
oninput事件
DOM.oninput = function() {}
4-注册事件
-
知识点-通过 on 方式给元素注册事件
-
知识点-通过addEventListener方式注册事件
-
语法
DOM.addEventListener('事件类型',function(){});例如: div.addEventListener('click', function(){});注意: 通过addEventListener元素注册事件的时候,事件类型前不需要加 'on' -
特点
-
-
知识点-移除事件
-
移除
on方式注册的事件DOM.事件类型 = null; -
移除
addEventListener注册的事件DOM.removeEventListener('事件类型', 函数名)注意: 如果要通过removeEventListener移除事件的时候,那么addEventListener注册事件的时候需要是命名函数
-
-
补充说明:
var btn = document.getElementById("myBtn"); if (btn.addEventListener) { btn.addEventListener("click", myFunction); } else if (btn.attachEvent) {//兼容写法btn.attachEvent("onclick", myFunction); }
5-事件流
- 知识点-事件冒泡
- 知识点-事件捕获
- 知识点-事件目标
- 知识点-事件委托
- 知识点-事件对象参数
- e.target : 获取真正触发事件的对象
- e.type： 事件类型
- e.clientX
- 特点: 相对body
- e.clientY
- e.offsetX
- 特点:相对父元素左上角
- e.offsetY
- e.pageX
- 特点:相对整个页面包括滚动出去的位置
- e.pageY
- e.screenX
- 特点:相对整个电脑屏幕
- e.screenY
- e.stopPropagation() 阻止事件冒泡
- 课堂案例-鼠标移动案例
6.键盘事件
-
知识点-onkeydown事件
-
知识点-onkeyup事件
-
知识点-onkeypress事件
-
键盘事件对象参数
-
e.key
-
e.keyCode
-
-
课堂案例-键盘移动案例
)
第五天（1）)
第五天（2）)
 - 插件的删除和升级)
 内存泄漏)
第六天（1）)
