网站开发项目的心得体会,十个免费软件不收费,官网网站建设需求文档,宁波建设网证书查询平台目录
01 DOM操作事件的体验
02 获取元素对象的五种方式
03 事件中this指向问题
04循环绑定事件
05 DOM节点对象的常用操作 06 点亮盒子的案例
07 节点访问关系
08 设置和获取节点内容的属性
09 以上内容的小总结 01 DOM操作事件的体验 js本身是受事件驱动的脚本语言 什…目录
01 DOM操作事件的体验
02 获取元素对象的五种方式
03 事件中this指向问题
04循环绑定事件
05 DOM节点对象的常用操作 06 点亮盒子的案例
07 节点访问关系
08 设置和获取节点内容的属性
09 以上内容的小总结 01 DOM操作事件的体验 js本身是受事件驱动的脚本语言 什么是事件? 一系列状态 比如: 点击事件 鼠标离开事件 页面加载事件 驱动: 驱使程序动起来 页面元素绑定事件的步骤: 1.获取页面元素对象 2.元素对象.on事件名称匿名函数(js系统提供好了很多事件) 3.在匿名函数里面定义执行的功能代码 02 获取元素对象的五种方式 获取页面元素的五种方式: 1.通过id获取元素对象 var 变量document.getElementById(元素id) 2.通过class获取元素对象 返回的是一个伪数组对象 var 变量document.getElementByClassName(标签class属性) 不能直接拿来当做节点对象操作 要想使用其中的元素对象,必须通过伪数组[索引值] 取出里面指定索引值的元素对象再践行操作 3.通过标签名获取 返回值是伪数组 var 变量document.getElementsByTagName(标签名) 4.通过选择器获取单个元素 var 变量document.querySelector(css选择器) 只能选中单个元素 5.通过选择器获取多个元素 var 变量document.querySelectorAll(选择器) 伪数组: 只有索引功能和length属性 但是没有数组的那些常用的函数(push pop shift...) 循环遍历伪数组: for(var i0;i伪数组名.length;i){ lis[i].style.backgroundColorred } 03 事件中this指向问题 事件源: var boxdocument.getElementById(box); var boxdocument.querySelector(#box) console.log(box) 事件名称 事件驱动函数 事件源.on事件名称事件驱动函数(匿名函数) box.οnclickfunction(){ alert(你好) } 在事件当中的this 指向的是当前绑定这个事件的事件源对象 也就是本次触发这个事件的事件源 总结: 谁触发了这个事件 this就指向谁 04循环绑定事件 如果页面多个元素 想要绑定同一个事件 并且事件代码功能也相同, 那么就可以使用循环遍历的方式绑定. var btnArrdocument.querySelectorAll(button); console.log(btnArr); for(var i0;ibtnArr.length;i){ btnArr[i].οnclickfunction(){ // 这个函数是页面加载时 循环给每一个按钮绑定的事件驱动函数 // 只有点击的时候才执行里面的代码 // 页面加载时只是绑定了函数 // 所以等到函数执行的时候也就是你点击的时候页面早就加载完毕了 // 页面加载完毕了 也就以为这这个循环早就结束了 也就是这个循环执行完了 // 那么这个 i 变量的值就已经是5了 // console.log(btnArr[i]); // btnArr[i].style.backgroundColorblue console.log(this); this.style.backgroundColorblue } } 05 DOM节点对象的常用操作 操作元素的class 获取: 元素对象.className 设置: 元素对象.className新类名1 新类名2... 通过className属性改变标签类名 会全部设置上新赋的值 如果想要原本的类名 需要在赋值的时候也增加上 设置行内样式: 元素.style.css 属性名属性值 操作图片标签的src属性: 图片对象.src 操作元素的title属性: 元素对象.title 小总结: 对象.属性 不写等号就是获取 对象.属性值 写等号就是设置/修改 06 点亮盒子的案例 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle*{margin: 0;padding: 0;}nav{height: 40px;line-height: 40px;text-align: center;width: 500px;margin:50px auto;}navdiv{float: left;height: 40px;padding: 0 20px;background-color: hotpink;margin-right: 5px;cursor: pointer;color:#fff;}navdiv.current{background-color: orange;}/style
/head
bodynavdiv classcurrent首页/divdiv商品页/divdiv购物车页/divdiv 个人中心/divdiv联系我们/div/navscript// 排他思想// 干掉所有人 留下我自己var divArrdocument.getElementsByTagName(div)// console.log(divArr);// 循环绑定鼠标移入事件 onmouseover 鼠标进入事件 只会触发一次for(var i0;idivArr.length;i){// console.log(i);divArr[i].onmouseoverfunction(){// console.log(111);// this.style.backgroundColororange// 排他思想 干掉所有人for(var i0;idivArr.length;i){divArr[i].className}// 留下我自己this.classNamecurrent}}/script
/body
/html 07 节点访问关系 利用节点与节点之间的关系 找到指定的元素 获取父节点对象: parentNode 获取第一个子节点:firstElementChild 获取最后一个子节点:lastElementChild 获取上一个兄弟节点:previousElementSibling 获取下一个兄弟节点:nextElementSibling 获取所有子节点: childNodes children(常用) 08 设置和获取节点内容的属性 元素对象.innerHtml 元素对象.innerText 获取时: innerHTML可以获取内部所有的内容包括标签 innerText只能后去内部素有的标签内的文本内容 获取不到标签 设置时: 他们两个都能把内部的内容全部清空然后替换成我们赋值的内容 如果字符串中带有标签 那么innerHTML会把标签渲染出来呈现在页面中 innerText不会吧标签渲染出来 只会按照普通字符串的形式展示 09 以上内容的小总结 元素获取的五种方式 1.id 2.className 3.tagName 4.querySelector(选择器) 5.querySelectorAll(选择器) this指向问题 构造函数中的this指向新创建的对象 普通函数中的this指向函数的调用者 元素事件驱动函数中的this指向当前触发事件的那个元素 循环绑定事件 多个元素绑定同一个事件 通过this获取当前触发事件的那个元素对象 DOM节点的常用操作 操作样式 元素对象.style.css属性名属性值 操作class: 元素对象.className 操作标签的其他的属性 元素对象.src title href 点亮盒子 排他思想 节点访问关系 父节点 parentNode 第一个子节点firstElementChild 最后一个子节点lastElementChild 上一个兄弟previousElementSibling 下一个兄弟nextElementSibling 所有子节点children childNodes(包括文本节点) 元素对象内容 innerHTML innerText
