JavaScript-DOM-02
自定义属性：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.card{width: 100px;height: 100px;background-color: aqua;border: 1px solid black;}</style>
</head>
<body><!-- 固有属性 id class style src href --><!-- 自定义属性 有时候我们希望自己存一些自己定义的属性 作用：存值 --><!--我们希望就是目前是有一列商品 但是我希望点击的时候 能够跳转到新的页面 肉眼可见没什么用，而是我们要想办法就是让程序也可以清晰可见 --><!-- 我们先自定义一个属性名为Product-id 然后我点击的时候我希望拿到这个属性--><div class="card" product-id="1">商品</div><div class="card">商品</div><div class="card">商品</div><div class="card">商品</div><div class="card">商品</div></body>
<script>//我们先去拿到所有的商品 var getProducts=document.querySelectorAll('.card')console.log(getProducts);getProducts.forEach(function (ele,index) {// 拿到每一个div对象console.log(ele);console.log(ele.className);// 重点：这里我们取自定义属性名的方法console.log(ele.getAttribute('product-id'));// 所以这里我们判断 记住 null就是为false在前端是这样的 我们用可以这种方法去存if(!ele.getAttribute('product-id')){// 大写驼峰不识别ele.setAttribute('product-id',index)}})</script>
</html>
事件:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 1.通过标签属性绑定点击事件 div onclick="函数调用"></div> 满足了三个条件 事件源：div 事件类型:onclick或者是一个鼠标键盘的行为 事件源程序：放到onclick里面的--><div onclick="testOne(this)">这是一行字</div><button class="btn">第二绑定方式</button><!-- --><span>xxxx</span><button class="demo-btn">这是第二个按钮</button><!-- 表单输入标签 --><input type="text" class="box"></body>
<script>// 事件重点中的重点 事件字面上来说就是可以被js检测到的行为，点击，拖拽，键盘，鼠标，对我这个网页的交互行为// 我们针对用户的行为去做代码上的指定事情// 表单标签就有输入事件// 事件的三大部分// 事件源：比如我点击一个按钮 这个按钮就是事件源// 事件类型：事件的触发方式：单击，双击 长按// 事件程序：对于这个事件源我要做什么事情，比如我点击一个按钮 右侧要打开一个列表 那么打开的这个过程就是我们要写的// 记住只要是事件 都包含两个参数 一个是事件参数event自带（保存一些事件相关信息） 一个是事件源的指向（this 本质就是自身的DOM对象）// 开发者工具切换设备仿真 鼠标点击 和手机触摸// 绑定的三种方式// 声明一个函数 源程序的function testOne(_this) {console.log('你触发了我，我真的谢谢你！！！');// 现在这个this指向整个html对象上去了 通过标签属性绑定的是没有this的 除非在()里面声明 需要手动传入console.log(_this.innerText);}// 2.通过DOM对象.事件的绑定var btn=document.querySelector('.btn')// 直接写事件 btn.onclick=function testTwo() {console.log("Two Two Two");}// 利用DOM对象.addEventListener 传两个参数 一个是绑定参数的类型 一个是源程序 那么第一个参数中如果是前缀有on的都可以不用写document.querySelector('span').addEventListener('click',function testThree() {console.log("this is the third Method");console.log(event);console.log(this.innerText);})
</script>
<script>// 鼠标悬浮事件 鼠标移进去就修改颜色样式var demoBtn=document.querySelector('.demo-btn')demoBtn.onmouseover=function(){console.log('dnksmxksmxksmsd');//但是移出去还没有设置变回来demoBtn.style.backgroundColor='red'}demoBtn.onmouseout=function(){demoBtn.style.backgroundColor='green' }// 键盘事件一般是用在表单输入标签上面 以及我们可以设置如果输入非法字符就怎么样的一个思路 以及视频的快进（去判断按的按钮是否是左键右键 如果是前进几秒倒退几秒）var boxDom=document.querySelector('input')boxDom.onkeydown=function(){console.log(this);console.log(event);var test=''if(isNaN(event.key)){this.value=test}}// 文档对象也能添加事件 表示说当我进入整个网站页面 我点击哪个触发哪些事件</script>
</html>冒泡事件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="father">父亲<button class="child">孩子</button></div></body><script>// 冒泡事件触发的前提条件：// 嵌套层级上有相同的触发事件类型var father =document.querySelector('.father')var child=document.querySelector('.child')father.onclick=function(){console.log('点击了父亲');event.stopPropagation()}// 当我点击孩子的时候 父亲这时候也触发了两个都触发了 这个就是冒泡排序 一层一层往上触发 先自己 然后哪一层有 就往上触发child.onclick=function(){console.log('点击了孩子');// 所以我们必须禁止冒泡 因为假如一个界面一个商品的界面有几个立即购买，查看商品详情 那么我不可能点一下同时触发两次。只停止自己的// 所以这种嵌套我们必须每一个function里面都写event.stopPropagation()}</script>
</html>默认事件：（了解 框架帮我们做好了）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="https://cn.bing.com/?form=000047&ocid=msedgntp&pc=CNNDDB&cvid=682bcc6ea3704a9688bbb3a3b06ac7b3&ei=10"><input type="text"><!-- 只要这边有按钮就会有提交效果，跳转网页到action的网址路径中去 --><!-- 如果我要输入值校验 来不及校验就走掉 我们要在标签提交前 去做校验 --><button>提交</button></form></body>
<script>// 该方法阻止默认事件 比较少用 但是冒泡事件用得会比较多document.querySelector('form button').onclick=function(){// 这样子我就可以安安心心地拿到所有值去判断event.preventDefault()}</script>
</html>节点操作：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 100px;height: 100px;border: 1px solid black;}.title{width: 100px;height: 100px;background-color: aqua;}</style>
</head>
<body><!-- 一个标签（不是在js）一般都是元素节点 一个是文本节点 --><!-- innnerHTML两个都能够修改 --><!-- innerText只能够修改文本内容 --><div class="father"><div class="child">孩子 <span>x</span> <span>xxx</span></div><div class="brother">兄弟</div></div><div class="news-model"></div><!-- 创建一个按钮 与节点删除做测试 --><button onclick="del()">delll</button>
</body>
<script>// 现在就是要通过child去找它的兄弟 需要通过节点操作 因为如果有七八个的话没必要
// 节点操作后面也是很少用 但是这个克隆节点 比如说弹幕点击可以弹一个窗口回复（原来的位置保持不变） 或者说鼠标到弹幕停止滚动var chid=document.querySelector('.father .child')// 通过孩子可以找到父节点console.log(chid.parentElement);// 获取孩子的子节点 目前只有文本节点 我再加一个span 比较少去取文本console.log(chid.childNodes);// 一般用这种方法去取 子元素节点console.log(chid.children);// -----------------------------// 现在去拿到父亲节点var father=document.querySelector('.father')// 拿到的是childconsole.log(father.firstElementChild);// 获取下一个相邻的兄弟console.log(chid.nextElementSibling);// child 找到里面的第一个span 然后可以一直往下找// console.log(chid.firstElementChild.nextElementSibling.nextElementSibling);// 优化 我们可以用这种方法直接找到最后一个span 基于已有childDOM对象再去找它内部的东西var spanDOM=chid.querySelector('span:last-child')console.log(spanDOM);// 我们真正项目很少去写DOM// 就是说我们要把这些数据打到页面上去 之前的思路就是在body创建三个标签 然后分别设置样式 现在就是我们要根据这个数据去创建这样的标签// 1.先创建节点 括号表示要什么样的标签// 2.现在在代码上我们得想办法加到页面上去 现在上面创建一个存放新闻的面板var newDOMS=document.createElement('div')var data=["今天下雨","XXX","sjdjnsjd"]console.log(newDOMS);// 补充：我们一般是在加入之前 把标签的内容等构建好再加newDOMS.innerText='12235'newDOMS.classList.add('title')// 3.找到要添加的目标var targetNewModel=document.querySelector('.news-model')// 在内部往后加 一般是往后 括号填入创建好的 最初都是创建好的定死的，数据不可控 没办法根据数据的内容和数量去创建targetNewModel.appendChild(newDOMS)// 动态添加创建节点data.forEach(function (ele) {var newDOMS=document.createElement('div')newDOMS.innerText=ele// 在这边我们也可以去添加事件newDOMS.onclick=function(){console.log('别再点我了 谢谢');}newDOMS.classList.add('title')targetNewModel.appendChild(newDOMS)// 所以只要我有数据我就可以根据数据的量和数据的内容去创建，动态的把页面构建出来 现在的网站都这样 数据不是定死 刷新一下可能就变了 都是利用DOM去操作的})// 节点删除var btn11=document.createElement('button')btn11.innerText='mashang'// 加在body的最后面 只是测试document.querySelector('body').appendChild(btn11)function del(){console.log(btn11);// 调用该函数 删除 代码层面上还在 页面上已经不存在了 btn11.remove()}// 节点克隆// 我现在想要把整个father节点给它克隆出来 没有true的话克隆的只有当前father的元素 true的话就是father里面的元素也能够被克隆// 与被克隆毫无相关var getDivFatherByClone=document.querySelector('.father').cloneNode()console.log(getDivFatherByClone);</script>
</html>