重庆开县网站建设报价,京东网上购物官方网站,在线oa,时空赣州网目录
前言#xff1a;
1. DOM介绍
2. 获取节点
3. 操作HTML内容
4. 监听事件
案例
5. 操作节点的标签属性
6. 操作样式
7. 创建、添加、删除节点 前言#xff1a; 在此之前我们要想去操作网页元素一般是去通过CSS选择器实现的#xff0c;今天我们就学习JavaScript里… 目录
前言
1. DOM介绍
2. 获取节点
3. 操作HTML内容
4. 监听事件
案例
5. 操作节点的标签属性
6. 操作样式
7. 创建、添加、删除节点 前言 在此之前我们要想去操作网页元素一般是去通过CSS选择器实现的今天我们就学习JavaScript里面的DOM元素通过DOM元素我们可以去选中并且对网页页面元素进行操作这是一个很重要的内容下面我会去详细讲解一起来学习吧。
1. DOM介绍 DOM全称为 “Document Object Model”文档对象模型提供操作HTML文档的方法。注每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。 当网页加载时浏览器就会自动创建当前页面的文档对象模型DOM。在DOM中文档的所有部分例如元素、属性、文本等都会被组织成一个树结构类似于族谱树中每一个分支的终点称为一个节点每个节点都是一个对象。 2. 获取节点
DOM为我们提供了一个全局内置对象document要操作HTML标签我们可以调用document对象中的各种方法来获取页面中的标签在js中我们可以称之为 元素 或者 节点
根据CSS选择器来获取DOM元素
// 选择匹配的第一个元素
// 返回值CSS选择器匹配的第一个元素。如果没有匹配到则返回null。
document.querySelector(css选择器)
// 选择匹配的多个元素
// 返回值CSS选择器匹配的NodeList对象集合 是一个伪数组
document.querySelectorAll(css选择器) 通过ID获取document.getElementById() 通过class名获取document.getElementsByClassName() 通过标签名获取document.getElementsByTagName() 注意 document.getElementById()这个获取到的是一个DOM元素也就是标签元素而document.getElementsByClassName()和document.getElementsByTagName() 获取到的是一个HTMLCollection对象是一个存放DOM元素的列表如果要想获取到DOM元素那么就可以从HTMLCollection列表拿出里面的DOM元素即可 看代码示例
bodydiv classfinediv classhe123/divdiv idgood classhe486/div/divscriptconsole.log(document.getElementById(good)); //获取id为good的标签元素console.log(document.getElementsByClassName(he)); console.log(document.getElementsByClassName(he)[0]);console.log(document.getElementsByTagName(div));console.log(document.querySelector(.fine .he));//获取到第一个console.log(document.querySelectorAll(.fine .he)); //获取到满足条件CSS选择器的全部/script
/body
结果如下
3. 操作HTML内容 节点.innerHTML : 读取或设置元素文本内容,可识别标签语法 节点.innerText : 读取或设置元素文本内容,不能识别标签语法 注意当使用innerHTML和innerText 对内容进行修改的时候要小心修改了之后会把原来的全部内容给覆盖掉包括标签文本等等……都会被覆盖 示例
bodydiv classfine只因你太美 babydiv classhe123/divdiv idgood classhe486/div/divscript//获取数据console.log(document.getElementsByClassName(fine)[0].innerHTML);//(html)获取到里面的全部数据console.log(document.getElementsByClassName(fine)[0].innerText);//(text) 获取到里面的文本数据//修改数据document.getElementsByClassName(fine)[0].innerHTML我家哥哥是最棒的;console.log(document.getElementsByClassName(fine)[0].innerHTML);//重新获取里面的数据内容/script
/body 4. 监听事件 事件是达到某个事先设定的条件自动触发的动作。例如点击了某个按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。我们可以使用 JavaScript中的监听事件来检测事件是否发生并执行某些特定的程序。 事件种类
事件描述onclick点击鼠标左键时触发此事件onmouseover当鼠标移动到某个元素上方时触发此事件onmouseout当鼠标离开某个元素范围时触发此事件onblur当前元素失去焦点时触发此事件onfocus当某个元素获得焦点时触发此事件onscroll当滚动浏览器的滚动条时触发此事件
执行方式 1. 直接在元素本身调用属性函数 2. 在js代码里面获取到元素然后附加一个事件执行函数 注意这两张方式this的指向性不同第一种this指向为window第二种this指向是当前元素 代码书写步骤 获取事件源document.getElementById(“box”); 绑定事件 事件源box.事件onclick function(){ 事件驱动程序 }; 代码示例以鼠标点击为例
bodydiv classkunp onclickfun()span迎面走来的你让我如此蠢蠢欲动/span/ppspan这种感觉是我从未got the crash on you who you/span/p/divscript//第一种function fun(){console.log(this);console.log(坤坤点击了我);}//第二种document.getElementsByTagName(p)[1].onclickfunction(){console.log(this);console.log(坤坤又点击了我);}/script
/body 案例 我们去浏览网页的时候当如果滚轮向下滚动到一定距离的时候就会出现一个回到顶部的按键按下我们就可以回到顶部下面代码通过JavaScript去实现这个功能。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.back{border: 2px solid red;width: 100px;height: 100px;position: fixed;right: 0;text-align: center;bottom: 100px;line-height: 100px;display: none; /* 默认不显示 */}/style
/head
body!-- 创建一个锚点 --div idtop这里是顶部/div!-- 这个是一个滚动的页面标签 --div styleheight: 2000px;/divdiv classbacka href#top回到顶部/a/divscript// 执行的this指向对象是windowwindow.onscrollfunction(){let moveydocument.documentElement.scrollTop; //获取到页面向下滚动的距离console.log(movey); //打印移动的距离if (movey500){ //判断如果向下滚动超过了500像素就让锚点出现document.getElementsByClassName(back)[0].style.displayblock;}else{document.getElementsByClassName(back)[0].style.displaynone;}}/script
/body
/html 效果如下
5. 操作节点的标签属性 直接使用 节点.属性 的方式。egconsole.log(节点.id); 节点.title 新的title。class名字不能 .class 而是使用 .className 代替。 6. 操作样式
访问元素节点的style属性获取样式对象样式对象中包含CSS属性使用点语法操作。
p.style.color white;
p.style.width 300px;
p.style.fontSize 20px; 如果css属性名包含连接符使用JS访问时一律去掉连接符,改为驼峰 font-size - fontSize 使用 .className 可以来操作标签的类名但是需要新加一个类名或者去掉某个类名时使用.className较为麻烦。所以推荐使用.classList 来操作类名。 添加节点.classList.add(类名) 移除节点.classList.remove(类名) 切换有则删无则加节点.classList.toggle(类名) 7. 创建、添加、删除节点 创建节点createElement 创建一个元素节点 添加节点 appendChild(node) 元素最后添加一个子节点 insertBefore(node,Enode) 在元素某个子节点之前添加新子节点第一个参数为新节点第二个参数为已存在的子节点。 替换节点replaceChild(node,Enode) 用新节点替换某个子节点第一个参数为新节点第二个参数为已存在的某个子节点。 删除节点removeChild(node) 删除元素的某个子节点。 看代码示例
bodydiv classamginpspan 马格南/span/p/divscript//创建元素节点let pdocument.createElement(button);let qdocument.createElement(button);let xdocument.createElement(div);//插入节点:元素最后添加一个子节点document.getElementsByClassName(amgin)[0].appendChild(p);//插入节点在元素某个子节点之前添加新子节点document.getElementsByClassName(amgin)[0].insertBefore(q,document.querySelector(.amgin p));//替换节点document.getElementsByClassName(amgin)[0].replaceChild(x,document.querySelector(.amgin p));//删除节点document.getElementsByClassName(amgin)[0].removeChild(q);/script
/body
结果 好了以上就是今天的全部内容了我们下一期再见
分享一张壁纸
