南头网站建设,网站软文推广网站,东莞合网站建设,网站开发的职业规划webAPI
0-操作标签属性 系统属性 作用: 1. 可以操作标签身上的任何一个系统中的自带属性 (id, class, name ....)
2. 还可以操作用户自定义的属性dom.getAttribute(属性名)#xff1b; 作用: getAttribute(属性名) 方法 就是用来获取标签身上属性的备注:
1. getAttribute() 方…webAPI
0-操作标签属性 系统属性 作用: 1. 可以操作标签身上的任何一个系统中的自带属性 (id, class, name ....)
2. 还可以操作用户自定义的属性dom.getAttribute(属性名) 作用: getAttribute(属性名) 方法 就是用来获取标签身上属性的备注:
1. getAttribute() 方法中放的是一个属性的名字
2. getAttribute() 方法中只能获取对应的一个属性
3. getAttribute() 方法如果没有获取到对应的属性值,那么就返回 null ,代表没有dom.setAttribute(属性名,值); 作用: 给标签设置属性(系统属性 自定义属性)例如:
div.setAttribute(id, one);
div.setAttribute(myage, 18);dom.removeAttribute(属性名) 作用: 将标签身上的属性移除(系统属性 自定义属性)例如:
div.removeAttribute(myname);
div.removeAttribute(id);自定义属性 标签属性(自定义属性)的作用是什么? 属性就是用来保存数据的.什么是自定义属性? 自定义属性: 程序员自己定义的一个属性 为什么会有自定义属性? 自定义属性: 为了保存程序自己的一些数据.最新的最标准的自定义属性的写法 所有的自定义的属性, 以 data-开始div mynamedhl data-mynamezs/div 设置自定义属性 dom.dataset.自定义属性名称 值;获取自定义属性 dom.dataset备注:
1. 只能获取自定义属性, 不能获取系统属性
2. dataset 存放的结果是一个对象
3. 访问dataset对象中的值,不能 带有 data-;总结 课堂练习-自定义属性tab栏切换案例
1-文本框事件 onfocus事件 当输入框获取鼠标焦点的时候,就会触发该事件onblur事件 当输入框失去焦点的时候,就会触发onblur事件课堂案例-搜索框案例
2-鼠标事件 onmouseenter 事件 当鼠标进入时候触发的一个事件onmouseleave 事件 当鼠标离开时候触发的一个事件onmouseover 事件 当鼠标悬停到标签之上触发的一个事件onmouseout 事件 当鼠标离开时候触发的一个事件课堂案例-鼠标进入隔行变色案例 课堂案例-ta栏切换
3-回顾获取页面元素
通过标签ID通过标签名称通过选择器
4-通过DOM节点方式获取元素
4-0注意事项
下面的内容都在在文档树上直接操作的 (节点 元素)重点是: 与元素相关的内容4-1与父节点相关的操作方式
4-1-1.知识点-判断父元素中是否有子节点
语法:
DOM.hasChildNodes();总结: 该方法返回的是一个布尔类型的结果该方法会将元素中所有的节点都获取包括空格回车符文字标签等
4-1-2.知识点-获取父元素中所有子元素
语法:
DOM.children总结: chiledren是一个属性不是一个方法该属性返回父元素中所有子元素只包含标签不包括空格回车符纯文本等返回一个伪数组通过dom.children.length来判断是否存在子元素(长度是为0)
4-1-3.知识点-获取父元素中第一个子元素
语法:
DOM.firstElementChild总结: 通过该属性可以将父元素中的第一个子元素获取到【标签】该属性只能获取标签无法获取文字空格回车符等节点
4-1-4.知识点-获取父元素中最后一个子元素
语法:
DOM.lastElementChild总结 通过该属性可以将父元素中最后一个子元素获取到【标签】该属性只能获取标签无法获取文字空格回车符等节点
4-1-5.知识点-获取父元素中所有子节点(了解)
语法:
DOM.childNodes总结 childNodes是一个属性不是一个方法该属性将父元素中所有节点返回包括回车空格等特殊符号该属性将回车符看做是一个空的文本
4-1-6.知识点-获取父元素中第一个子节点(了解)
语法:
DOM.firstChild总结 通过该属性可以将父元素中第一个节点得到节点中包括文字回车符换行符等
4-1-7.知识点-获取父元素中最后一个子节点(了解)
语法:
DOM.lastChild总结 通过该属性将父元素中最后一个节点得到节点中包括文字回车符换行符等
4-2与子节点相关的操作方式
4-2-1.知识点-获取上一个兄弟元素
语法:
DOM.previousElementSibling4-2-2.知识点-获取下一个兄弟元素
语法:
DOM.nextElementSibling4-2-3.知识点-获取下一个兄弟节点
语法:
DOM.nextSibling4-2-4.知识点-获取上一个兄弟节点
语法:
DOM.previousSibling4-2-5.知识点-根据子节点获取父元素
语法:
DOM.parentNode4-3节点属性
4-3-1.知识点-获取节点类型
语法:
DOM.nodeType总结:
1. 如果nodeType返回值是1那么代表当前节点是一个标签
2. 如果nodeType返回值是3那么代表当前节点是一个文本
3. 如果nodeType返回值是2代表标签中的一个属性4-3-2.知识点-获取节点名称
语法:
DOM.nodeName总结:
1. 如果当前节点是一个标签那么通过该属性返回该标签的名称
2. 如果当前节点是一个文本那么通过该属性返回 #text5-动态创建元素 知识点-通过document.write动态创建元素 知识点-通过innerHTMl动态创建元素 知识点-通过document.createElement()方式创建元素 步骤: document.createElement(‘标签名’)通过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(子元素);课堂案例-动态创建英雄图片
6-其他方式创建元素 父节点.insertBefore(“新的节点”,“旧的子节点”) 通过insertBefore可以在父元素中某一个子元素的前面添加一个新元素父节点.replaceChild(“新节点”,“旧节点”) 通过新节点将原来的节点替换掉元素.cloneNode(true| false) true: 代表克隆元素内部的所有信息
false: 默认。只克隆外边的标签课堂案例-微博案例 oninput事件 DOM.oninput function() {}7-注册事件 知识点-通过 on 方式给元素注册事件 知识点-通过addEventListener方式注册事件 语法 DOM.addEventListener(事件类型,function(){});例如:
div.addEventListener(click, function(){});注意:
通过addEventListener元素注册事件的时候,事件类型前不需要加 on特点 知识点-移除事件 移除 on方式注册的事件 DOM.事件类型 null;移除addEventListener注册的事件 DOM.removeEventListener(事件类型, 函数名)注意:
如果要通过removeEventListener移除事件的时候,那么addEventListener注册事件的时候需要是命名函数8-事件流
知识点-事件冒泡知识点-事件捕获知识点-事件执行知识点-事件委托知识点-事件对象参数 e.target : 获取真正触发事件的对象e.type 事件类型e.clientX 特点: 相对body e.clientYe.offsetX 特点:相对父元素左上角 e.offsetYe.pageX 特点:相对整个页面包括滚动出去的位置 e.pageYe.screenX 特点:相对整个电脑屏幕 e.screenYe.stopPropagation() 阻止事件冒泡 课堂案例-鼠标移动案例
9.键盘事件 知识点-onkeydown事件 知识点-onkeyup事件 知识点-onkeypress事件 键盘事件对象参数 e.key e.keyCode 课堂案例-键盘移动案例
