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

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-动态创建元素

1. 知识点-通过document.write动态创建元素

   document.write('<p>我是一个动态标签</p>');
   
   备注:
   1. document.write() 中放的都是字符串
   2. document.write() 适合创建少量的html元素
   

2. 知识点-通过innerHTMl动态创建元素

   DOM.innerHTML = '<p>我是一个动态标签</p>';
   
   备注:
   1. innerHTML 也是一个字符串
   2. 适合创建少量的html元素
   

3. 知识点-通过document.createElement()方式创建元素

   • 语法

     document.createElement('标签的名字');
     
     备注:
     1. document.createElement() 写的是标签的名字,不是标签
     2. document.createElement() 有返回值,返回值就是创建的标签对象
     

   • 步骤:

     • document.createElement(‘标签名’)

     • 通过appendChild(‘子元素’)添加到父元素中

       例如;
       var body = document.querySelector('body');
       //2. 如何将创建的元素添加到body父元素中?
       body.appendChild(div);
       
       
       备注:
       appendChild() 将新元素追加到父容器的末尾
       

4. 课堂练习-根据数组动态创建列表

   var ary = ['张三', '李四', '王五', '赵六'];
   

5. 课堂案例-根据数组动态创建英雄列表

   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(子元素);
     

6. 课堂案例-动态创建英雄图片

3-其他方式添加元素

1. 父节点.insertBefore(“新的节点”,“旧的子节点”)

   通过insertBefore可以在父元素中某一个子元素的前面添加一个新元素
   
   备注:
   1. 如果希望在父元素中的开始位置添加元
   
   例如:
   DOM对象.insertBefore(a, DOM对象.firstElementChild);
   	  		
   DOM对象.insertBefore(a, DOM对象.children[0]);
   

2. 父节点.replaceChild(“新节点”,“旧节点”)

   通过新节点将原来的节点替换掉, 不会保留原来的节点
   

3. 元素.cloneNode(true| false)

   false: 默认。只克隆外边的标签
   true: 代表克隆元素内部的所有信息
   

4. 课堂案例-微博案例

5. oninput事件

   DOM.oninput = function() {}
   

4-注册事件

1. 知识点-通过 on 方式给元素注册事件

2. 知识点-通过addEventListener方式注册事件

   • 语法

     DOM.addEventListener('事件类型',function(){});
     
     例如:
     div.addEventListener('click', function(){});
     
     注意:
     通过addEventListener元素注册事件的时候,事件类型前不需要加 'on'
     

   • 特点

3. 知识点-移除事件

   • 移除 on方式注册的事件

     DOM.事件类型 = null;
     

   • 移除addEventListener注册的事件

     DOM.removeEventListener('事件类型', 函数名)
     
     注意:
     如果要通过removeEventListener移除事件的时候,那么addEventListener注册事件的时候需要是命名函数
     

4. 补充说明:

   var btn = document.getElementById("myBtn");
   if (btn.addEventListener) {                   
       btn.addEventListener("click", myFunction);
   } else if (btn.attachEvent) {
       //兼容写法
       btn.attachEvent("onclick", myFunction);
   }
   

5-事件流

1. 知识点-事件冒泡
2. 知识点-事件捕获
3. 知识点-事件目标
4. 知识点-事件委托
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. 课堂案例-鼠标移动案例

6.键盘事件

1. 知识点-onkeydown事件

2. 知识点-onkeyup事件

3. 知识点-onkeypress事件

4. 键盘事件对象参数

   • e.key

   • e.keyCode

5. 课堂案例-键盘移动案例