广西建设局网站首页,无锡网站建设 微信,响应式网站建设模板下载,天津百度代运营文章目录 什么是DOM#xff1f;使用DOM获取元素事件操作元素获取、修改元素内容获取、修改元素属性获取、修改表单元素属性#xff1a;input获取、修改样式属性直接修改样式#xff1a;行内样式通过修改class属性来修改样式 新增节点删除节点 什么是DOM#xff1f;
DOM使用DOM获取元素事件操作元素获取、修改元素内容获取、修改元素属性获取、修改表单元素属性input获取、修改样式属性直接修改样式行内样式通过修改class属性来修改样式 新增节点删除节点 什么是DOM
DOMDodument Object Model是文档对象模型。
Document文档指的是HTML页面。 Object对象指的是JS的对象。
DOM其实就是把HTML页面上的每个标签对应成JS的一个个对象通过这些个对象就可以获取/修改标签的内容和属性。
使用DOM
获取元素
let div document.querySelector(div);
let divs document.querySelectorAll(div);注 document是浏览器提供的一个全局变量表示当前页面。我们可以借助这个变量来获取到当前页面上的所有元素querySelector是用来获取对象的方法里面写CSS的选择器可以通过选择器来选中不同的元素如果querySelect选择到多个元素只能将第一个选择到的元素赋值给变量只能使用到第一个元素querySelectAll可以选择到所有元素会把选择到的元素都放到divs这个数组中。 事件
用户对浏览器进行的操作都会由浏览器产生对应的“事件”。JS是为了实现和用户的交互的它就会获取到这些事件来和用户进行交互。
事件的三要素
事件源哪个元素触发的事件类型点击选中修改事件处理程序往往是一个回调函数。回调函数不需要程序员主动调用它会在触发事件时自动执行。 // 让 div 处理鼠标点击事件. //选中div标签let div document.querySelector(div);//鼠标点击div标签div.onclick function() {console.log(按下鼠标);}//鼠标在div标签上移动div.onmousemove function() {// console.log(鼠标移动);}//鼠标进入到div标签的区域div.onmouseenter function() {console.log(鼠标进来了);}//鼠标从div标签的区域离开div.onmouseleave function() {console.log(鼠标出去了);}操作元素
获取、修改元素内容 divhello/div// 先选中 divlet div document.querySelector(div);// 获取元素里的内容console.log(div.innerHTML);// 还可以通过给innerHTML属性赋值, 来起到修改的作用. div.onclick function() {// 这里赋值, 不仅仅能够赋值文本, 还可以赋值一个 html 片段. div.innerHTML 修改元素内容;}注使用innerHTML属性来获取和修改元素的内容元素的内容指的是开始标签和结束标签之间夹着的东西这是内容 获取、修改元素属性 img srcrose.jpg alt这是一朵花 width50px//选中img标签let img document.querySelector(img);//获取到img标签里的属性console.log(img.src);console.log(img.width);console.log(img.alt);//修改img标签的属性img.onclick function() {img.src img/female.png;}注元素的属性指的是元素开始标签里写的键值对 获取、修改表单元素属性input input typebutton value播放//选中input标签var btn document.querySelector(input);//获取input标签的属性console.log(btn.value);//修改input标签的属性btn.onclick function () {if (btn.value 播放) {btn.value 暂停;} else {btn.value 播放;}}
获取、修改样式属性
直接修改样式行内样式 div stylefont-size: 20px; font-weight: 700;hello/div//选中div标签var div document.querySelector(div);//直接通过内联属性来修改样式div.onclick function () {//得到原来的值var curFontSize parseInt(div.style.fontSize);curFontSize 10;//设置新的值div.style.fontSize curFontSize px;}
通过修改class属性来修改样式 //准备两个样式不同的类.light {color: black;background-color: white;} .dark {color: white;background-color: black;}//给div标签添加class属性为了后续的修改样式div classlight这是一大段话这是一大段话这是一大段话这是一大段话/div //选中div标签let div document.querySelector(div);//通过div标签的class属性来修改样式div.onclick function() {// 通过 className 属性获取到 html 元素中的 class 属性if (div.className dark) {div.className light;} else if (div.className light) {div.className dark;} else {alert(class 错误!);}}新增节点 div classparentdiv11/divdiv22/divdiv33/div/div//选中父标签let div document.querySelector(.parent);// 创建一个新的 div来添加到父标签里let childDiv document.createElement(div);childDiv.innerHTML 44;//通过appendChild方法进行新增节点div.appendChild(childDiv);删除节点 div classparentdiv11/divdiv22/div//设置class属性 方便删除div classtoDelete33/div/div//选中父标签let div document.querySelector(.parent);//选中要删除的子标签let toDelete document.querySelector(.toDelete);//删除子标签div.removeChild(toDelete);
