JavaScript-DOM

节点的层次结构

hasChildNodes() 【父元素中是否包含子节点】

dom.hasChildNodes()
总结：1.该方法返回的是一个布尔类型的结果用来判断当前元素中是否存在子节点。2.该方法会将元素中所有的节点都获取（包括空格，回车符，文字，标签等）

父节点.chiledren【父元素中的子元素】

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

根据父节点获取子节点【父元素中的子节点】

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

获取父元素中第一个子元素

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

获取父元素中最后一个子元素

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

获取父元素中第一个节点

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

获取父元素中最后一个节点

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

操作与子元素相关的方法

根据子节点获取父节点

☞ dom.parentNode
总结：1.通过该属性可以获取到整个父元素节点2.包括父元素中的所有文字，回车符等节点☞ 通过 nodeType 获取节点类型dom.nodeType
总结：1. 如果nodeType返回值是1，那么代表当前节点是一个标签2. 如果nodeType返回值是3，那么代表当前节点是一个文本【回车符】3. 如果nodeType返回值是2，代表标签中的一个属性☞ 通过 nodeName 获取节点名称dom.nodeName总结：1. 如果当前节点是一个标签，那么通过该属性返回该标签的名称2. 如果当前节点是一个文本，那么通过该属性返回 #text

获取兄弟节点
- 获取下一个节点

☞ node.nextElementSibling 总结：1.获取当前元素的下一个兄弟元素，不包括回车符，返回的是一个标签☞ node.nextSibling 总结：1.获取当前元素的下一个兄弟元素，包括回车符

- 获取上一个节点

☞ node.previousElementSibling  总结：1. 上一个兄弟元素，不包括回车符
☞ node.previousSibling 总结：1. 上一个兄弟元素，存在兼容性

创建元素

document.write()
dom.innerHTMl

document.createElement()

 总结：1. createElement()只是在内存中创建了一个元素，无法再页面中显示出来2. 创建完元素后需要通过node.appendChild(子节点)将元素添加到dom树中案例：通过数组动态创建列表，鼠标进入高亮显示var ary = ["张三", "李四", "王五"];

课堂案例

创建英雄列表案例

创建表格【根据数据】-- 父元素.removeChild(node)

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:'北京'}];

动态创建元素的其他方式

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

  注意：1. 我们通过createElement创建的元素，默认都在元素的末尾添加2. 通过insertBefore可以在父元素中某一个子元素的前面添加一个新元素

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

  总结：1. 通过新节点将原来的节点替换掉

元素.cloneNode(true| false)

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

输入框事件

oninput事件

dom.oninput = function() {}
总结：1. 用户在输入内容时候触发该事件

注册事件

on方式注册事件

问题：使用on的方式给标签注册事件，后面的事件会将前面的事件覆盖掉

addEventListener() 给元素注册事件

参数介绍：第一个参数：代表事件类型【click,focus...】第二个参数：事件执行函数第三个参数：参数，可选，true或者false（默认）
备注：1. 存在浏览器兼容性IE9以后2. 多在移动端使用
语法：事件源.addEventListener(事件类型,事件处理程序);

attachEvent() 给元素注册事件

dom.attachEvent('事件类型'，function(){}) 注意：1. 第一个参数： 代表事件类型需要 加 on2. 该事件注册方式是给IE低版本浏览器使用的

移除元素事件

  1. 如果通过on给元素注册事件，那么移除对应的事件赋值为null即可例如：  div.onclick = null;2. removeEventListener()注意：1. 如果需要通过removeEventListener移除事件，那么在使用addEventListener注册事件的时候必须是命名函数，不能是匿名函数3. detachEvent() ,移除事件也需要命名函数

addEventListener()第三个参数介绍【事件流】

  事件冒泡： 如果addEventListener的第三个参数为false事件捕获： 如果addEventListener的第三个参数为 true总结：☞事件发生的三个阶段：1. 捕获阶段  2. 执行阶段： 执行当前点击的元素3. 冒泡阶段： ☞ on 或者 attachEvent方式注册的事件，无法捕获事件以上三个阶段，只能有事件冒泡，因为不支持第三个参数

委托

 事件委托： 本质就是利用了事件冒泡实现步骤：通过事件对象参数，来捕获当前事件相关的数据。事件参数（对象）： 当事件发生的时候，可以捕获一些和当前事件相关的数据案例：点击li获取内容信息

事件对象

通过事件对象可以获取到事件发生的时候和事件相关的数据☞ 在标准的方式中，在事件处理程序中，通过参数 “e”事件对象获取☞ 在IE低版本中， 通过window.event 获取事件对象e.target : 获取真正触发事件的对象
e.type： 事件类型e.clientX: 相对可视区域左上角横坐标【以HTML标签为参照，如果将body8像素去掉，body和html一样】
e.clientY：相对可视区域左上角纵坐标【以HTML标签为参照，如果将body8像素去掉，body和html一样】e.offsetX: 横坐标是相对于当前点击元素的左上角
e.offsetY: 相对当前点击元素的左上角e.pageX： 相对整个body标签左上角【始终以整个页面最左边为参照】
e.pageY： 相对整个body标签左上角【始终以整个页面最上面为参照】e.screenX:  相对整个浏览器的左上角
e.screenY： 相对整个浏览器的左上角e.stopPropagation() 阻止事件冒泡课堂案例：鼠标移动案例键盘移动案例键盘事件： onkeydown： 用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。   onkeyup  ：  用户放开任何先前按下的键盘键时发生。 onkeypress： 【这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键,TAB,ctrl等功能键）无法得到识别。 】e.key： 获取按下键的名称
e.keyCode : 键对应的值

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

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

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

JavaScript-DOM

节点的层次结构

操作与子元素相关的方法

根据子节点获取父节点

获取兄弟节点

创建元素

动态创建元素的其他方式

输入框事件

注册事件

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

最新文章

热门文章