webAPI

1-通过DOM节点方式获取元素

1-0注意事项

下面的内容都在在文档树上直接操作的 (节点 + 元素)重点是: 与元素相关的内容

1-1与父节点相关的操作方式

1-1-1.知识点-判断父元素中是否有子节点

语法:
DOM.hasChildNodes();

总结:
1. 该方法返回的是一个布尔类型的结果
2. 该方法会将元素中所有的节点都获取（包括空格，回车符，文字，标签等）

1-1-2.知识点-获取父元素中所有子元素

语法:
DOM.children

总结:
1. chiledren是一个属性，不是一个方法
2. 该属性返回父元素中所有子元素（只包含标签），不包括空格，回车符，纯文本等
3. 返回一个伪数组
4. 通过dom.children.length来判断是否存在子元素(长度是为0)

1-1-3.知识点-获取父元素中第一个子元素

语法:
DOM.firstElementChild

总结:
1. 通过该属性可以将父元素中的第一个子元素获取到【标签】
2. 该属性只能获取标签，无法获取文字，空格，回车符等节点

1-1-4.知识点-获取父元素中最后一个子元素

语法:
DOM.lastElementChild

总结
1. 通过该属性可以将父元素中最后一个子元素获取到【标签】
2. 该属性只能获取标签，无法获取文字，空格，回车符等节点

1-1-5.知识点-获取父元素中所有子节点(了解)

语法:
DOM.childNodes

总结
1. childNodes是一个属性，不是一个方法
2. 该属性将父元素中所有节点返回（包括回车，空格等特殊符号）
3. 该属性将回车符看做是一个空的文本

1-1-6.知识点-获取父元素中第一个子节点(了解)

语法:
DOM.firstChild

总结
1. 通过该属性可以将父元素中第一个节点得到
2. 节点中包括文字，回车符，换行符等

1-1-7.知识点-获取父元素中最后一个子节点(了解)

语法:
DOM.lastChild

总结
1. 通过该属性将父元素中最后一个节点得到
2. 节点中包括文字，回车符，换行符等

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
课堂案例-键盘移动案例

js(Dom+Bom)第四天（1）相关推荐

js(Dom+Bom)第一天（1）
JavaScript-DOM(BOM)操作核心知识获取页面元素事件设置样式学习目标能够使用id名,标签名等方式获取页面中元素能够给标签注册点击事件,并实现对应效果能够给标签通过js方式 ...
js(Dom+Bom)第七天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第六天（1）
webAPI 01-键盘事件知识点-onkeydown事件[掌握] onkeydown: 当键盘上的键被按下时候触发的一个事件知识点-onkeyup事件[掌握] onkeyup: 键盘上键弹起时候 ...
js(Dom+Bom)第五天（2）
webAPI 01-事件监听为什么要学事件监听之前给元素注册事件的时候,同一个事件会被覆盖掉事件监听的本质通过另外一种方式给元素注册事件, 同时可以解决同一个事件不会被覆盖掉. 知识点-通过 ...
js(Dom+Bom)第五天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第一天（2）
webAPI 00-复习内置对象中的方法 01-JavaScript组成知识点-ECMASCRIPT 重点回顾存储容器变量数组对象逻辑语法分支语句循环语句 switch语句知识点- ...
js(Dom+Bom)第八天—Swiper(插件)
Swiper插件(库) 01-基本介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话).主要使用于移动端的网站.移动web apps,nativ ...
js(Dom+Bom)第七天（2）
webAPI 01-动画封装应用到的知识点点击事件给元素设置一个绝对定位定时器(setInterval) 封装动画1的步骤: 让元素设置为绝定位设置元素的开始位置(从哪开始移动) 设置元素的 ...
js(Dom+Bom)第三天（2）
webAPI 0-操作标签属性系统属性作用: 1. 可以操作标签身上的任何一个系统中的自带属性 (id, class, name ....) 2. 还可以操作用户自定义的属性 dom.getAtt ...

js(Dom+Bom)第四天（1）