营销型网站有什么特点,手机网页制作app,南京汽车企业网站建设,wordpress网站是什么意思一、DOM 概述
DOM 是 JavaScript 操作网页的接口#xff0c;全称为“文档对象模型”#xff08;Document Object Model#xff09;。当网页被加载时#xff0c;浏览器将网页转为一个DOM#xff0c;并用JS进行各种操作。比如#xff1a;改变页面中的HTML 元素及其属性全称为“文档对象模型”Document Object Model。当网页被加载时浏览器将网页转为一个DOM并用JS进行各种操作。比如改变页面中的HTML 元素及其属性改变页面中的CSS 样式对页面中的事件做出响应。 可以这么理解DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。
如图理解 浏览器会根据 DOM 模型将结构化文档HTML解析成一系列的节点再由这些节点组成一个树状结构DOM Tree。
一最常用的节点类型
整个文档是一个文档节点 documentHTML 标签是元素节点 elementHTML 元素的属性是属性节点 attributeHTML 元素内的文本是文本节点 text
二节点间的关系
节点具有父子关系和同级关系等。除了根元素没有父节点其他元素都有父节点一个父节点可以有多个子节点。
二、DOM 操作
一获取已有的节点
1.getElementsByTagName 方法通过标签名获取节点。
搜索HTML标签名返回符合条件的元素。它的返回值是一个类似数组的对象HTMLCollection实例。如果没有任何匹配的元素就返回一个空集。
bodyp classaa我是段落1/pp classaa我是段落2/pp classaa idp3我是段落3/pscript// getElementsByTagName 通过标签名来获取节点 若有多个相同标签返回含有多个节点的类数组对象const p1 document.getElementsByTagName(p); console.log(p1);console.log(p1[0]);console.log(p1[1]);/script
/body
运行结果如下 因为 “p” 有三个p1 通过标签名获取了三个节点p1[0] 表示获取到的第一个则是“我是段落1”p1[1] 表示获取到的第2个则是 “我是段落2”。 2.getElementsByClassName 方法通过类名获取节点。
返回一个类似数组的对象 HTMLCollection 实例包括了所有 class 名字符合指定条件的元素。
bodyp classaa我是段落1/pp classaa我是段落2/pp classaa idp3我是段落3/pscript// getElementsByClassName 通过class名来获取节点若有多个相同class返回含有多个节点的类数组对象const p2 document.getElementsByClassName(aa);console.log(p2);console.log(p2[0]);console.log(p2[1]);console.log(p2[2]);/script
/body
因为 “aa” 有三个p2 通过类名获取了三个节点p2[0] 表示获取到的第一个则是“我是段落 “1”p2[1] 表示获取到的第二个则是 “我是段落2”p2[2] 表示获取到的是第三个则是 ”我是段落3“。 3.getElementById 方法通过 id 获取节点
直接返回匹配指定 id 属性的元素节点而不是类似数组的对象。
bodyp classaa我是段落1/pp classaa我是段落2/pp classaa idp3我是段落3/pscript// getElementById 通过id名来获取节点直接返回可操控的节点const p3 document.getElementById(p3);console.log(p3);/script
/body
运行结果如下 因为 ”p3“ 只有一个p3通过 id名 获取了一个节点则是 ”我是段落3“。 4.querySelectorAll 方法获取所有匹配的元素
接受一个 CSS 选择器作为参数返回匹配该选择器的元素节点。如果有多个节点满足匹配条件则返回第一个匹配的节点。
bodyp classaa我是段落1/pp classaa我是段落2/pp classaa idp3我是段落3/pscript// querySelectorAll 通过CSS选择器获取节点返回NodeList对象包含所有匹配给定选择器的节点const p4 document.querySelectorAll(.aa);console.log(p4);console.log(p4[0]);console.log(p4[1]);console.log(p4[2]);/script
/body
运行结果如下 因为 “.aa” 有三个p4 通过选择器获取了三个节点p4[0] 表示获取到的第一个则是“我是段落 “1”p4[1] 表示获取到的第二个则是 “我是段落2”p4[2] 表示获取到的是第三个则是 ”我是段落3“。 5.querySelector 方法通过选择器点击查看相关内容获取节点
接受一个 CSS 选择器作为参数返回匹配该选择器的元素节点。如果有多个节点满足匹配条件则返回第一个匹配的节点。如果没有发现匹配的节点则返回 null。
bodyp classaa我是段落1/pp classaa我是段落2/pp classaa idp3我是段落3/pscript// querySelector 通过CSS选择器获取节点返回第一个匹配上的节点const p5 document.querySelector(.aa); console.log(p5);/script
/body
运行结果如下 通过CSS选择器获取节点”p5“ 返回第一个匹配上的节点则是 ”我是段落1“。
二属性的查看与修改
1.id和className属性的查看与修改
1id 获取属性
bodyp classpp我是段落1/pp classpp我是段落2/pp classpp idp3我是段落3/pscript// 【实验一. 查看属性和修改属性】// 1.根据id获取节点 const p document.getElementById(p3);console.log(p);/script
/body
运行结果如下 2查看标签节点的属性
id 属性来读写当前元素节点的 id 名。
className 属性用来读写当前元素节点的 class 名。
bodyp classpp我是段落1/pp classpp我是段落2/pp classpp idp3我是段落3/pscript// 【实验一. 查看属性和修改属性】// 1.根据id获取节点 const p document.getElementById(p3);console.log(p);// 2.查看标签节点的属性console.log(p.id);console.log(p.className);/script
/body
运行结果如下 p 通过 id名”p3“ 获取节点p.id查看节点 id名p.className查看节点类名。
3修改节点的id属性
bodyp classpp我是段落1/pp classpp我是段落2/pp classpp idp3我是段落3/pscript// 【实验一. 查看属性和修改属性】// 1.根据id获取节点 const p document.getElementById(p3);console.log(p);// 3.修改节点的id属性p.id _p_3;console.log(p.id);/script
/body
运行结果如下 原来 id”p3“改为 id”_p_3“。
4修改节点的class属性
bodyp classpp我是段落1/pp classpp我是段落2/pp classpp idp3我是段落3/pscript// 【实验一. 查看属性和修改属性】// 1.根据id获取节点 const p document.getElementById(p3);console.log(p);// 4.修改节点的class属性p.className pp jj yy xx;console.log(p.className);/script
/body
运行结果如下 原来 class”p3“改为 class”pp jj yy xx“。
2.classList对象的操作
1id获取节点
bodyp classpp jj yy xx idp4我是段落4/pscript// 【实验二. classList对象的操作】// 根据id获取节点const p4 document.getElementById(p4);console.log(p4.classList);console.log(p4.classList[0]);/script
/body
运行结果如下 2add() 增加一个 class 名
bodyp classpp jj yy xx idp4我是段落4/pscriptconst p4 document.getElementById(p4);// 为classList添加一个新的class名p4.classList.add(zz);console.log(p4.classList);/script
/body
运行结果如下 增加一个 class 名 ”zz“。
3remove() 移除一个 class
bodyp classpp jj yy xx idp4我是段落4/pscriptconst p4 document.getElementById(p4);// 为classList移除一个class名p4.classList.remove(xx);console.log(p4.classList);/script
/body
运行结果如下 4contains() 检查当前元素是否包含某个 class 名返回布尔值
bodyp classpp jj yy xx idp4我是段落4/pscriptconst p4 document.getElementById(p4);// 检查classList中是否存在某个class名返回布尔值。console.log(p4.classList.contains(jj));console.log(p4.classList.contains(zz));/script
/body
运行结果如下 3.其他属性的查看与修改以img标签为例
bodyimg src./photo.jpg alt图片加载失败 idimg1script// 【实验三. 其他属性的查看与修改以img标签为例】const i document.getElementById(img1); console.log(修改前: i.src);/script
/body
运行结果如下 添加修改src属性后
bodyimg src./photo.jpg alt图片加载失败 idimg1script// 【实验三. 其他属性的查看与修改以img标签为例】const i document.getElementById(img1); console.log(修改前: i.src);i.src ./photo2.jpg; // 修改src属性console.log(修改后: i.src);/script
/body
运行结果如下 可以通过该方法更改网页中的图片.
三新节点的创建与插入
1.新节点的创建
1createElement 创建一个p标签节点
createElement 方法用来生成标签节点并返回该节点。
创建一个p标签节点通过createElement 方法用来生成标签节点并返回该节点。
script// 1. 创建节点// 1.1 创建一个p标签节点var p4 document.createElement(p);console.log(p4);/script运行结果如下 2createTextNode 创建一个文本节点
createTextNode 方法用来生成文本节点并返回该节点。它的参数是文本节点的内容。 script// 1.2 创建一个文本节点var t4 document.createTextNode(我是段落5);console.log(t4);/script
运行结果如下 3createAttribute 生成一个新的属性节点并返回该节点。
创建一个属性节点并为其赋值通过createAttribute 方法生成一个新的属性节点并返回该节点。可通过该节点的value属性对其赋值。 script// // 1.3 创建一个属性节点并为其赋值var a4 document.createAttribute(class); // 创建属性节点a4.value fruit; // 为属性节点赋值console.log(a4);/script
运行结果如下 2.新节点的插入
1appendChild 为标签节点增加子节点。
将文本节点作为子节点加入新建的p标签节点下面 // 2.1 将文本节点作为子节点加入新建的p标签节点下面p4.appendChild(t4);
2setAttributeNode 为标签节点插入属性节点比如nameclassid, style等
若 setAttributeNode 已经设置到别的元素节点则控制台会报错。 // 2.2 将属性节点插入新建的p标签节点p4.setAttributeNode(a4);
3将已经配置号的p标签节点作为子节点插入body节点中 const body_node document.getElementsByTagName(body)[0];body_node.appendChild(p4);
举例
运行代码如下
bodyp classpp我是段落2/pp classpp idp3我是段落3/pp classpp jj yy xx idp4我是段落4/pscriptvar p4 document.createElement(p);var t4 document.createTextNode(我是段落5);console.log(t4);var a4 document.createAttribute(class); a4.value fruit; console.log(a4);// 2. 插入节点// 2.1 将文本节点作为子节点加入新建的p标签节点下面p4.appendChild(t4); // 2.2 将属性节点插入新建的p标签节点p4.setAttributeNode(a4);// 2.3 将已经配置号的p标签节点作为子节点插入body节点中const body_node document.getElementsByTagName(body)[0];body_node.appendChild(p4);/script
/body
运行结果如下 三、定时器函数
1.setInterval 函数
指定某个任务每隔一段时间就执行一次无限次的定时执行
bodyp classpp我是段落/pscriptfunction func1(){console.log(定时任务: 喝水);}// 每隔1000ms执行一次定时任务无限重复setInterval(func1, 1000); /script
/body
运行结果如下 2.setTimeout 函数
setTimeout 函数用来指定某个函数在多少毫秒之后执行(仅执行一次)。它返回一个整数表示定时器的编号如果突然想撤销这个定时任务可以用这个编号取消。若要定时执行多次只需多次调用setTimeout 即可。
bodyp classpp我是段落/pscriptfunction func2(){console.log(定时任务: 去超市买酱油);}// 5秒以后仅仅执行一次定时任务返回的是该定时器唯一编码可利用该编码临时取消任务const time_id setTimeout(func2, 5000); // 临时通知该定时器取消任务 clearTimeout(time_id); /script
/body
该代码将在五秒后执行一次且只执行一次。
setTimeout 不会阻塞主线程
bodyp classpp我是段落/pscript// 你可以在这里继续执行其他代码setTimeout 不会阻塞主线程 console.log(正在执行别的代码...);/script
/body
运行结果如下 四、CSS样式操作
通过节点可以创建节点修改图片还可以修改CSS的样式
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title利用js修改CSS样式/titlestyle.box{width: 50%;height: 200px;color:blue;background-color: aliceblue;}/style
/head
bodydiv classbox iddiv1利用js修改CSS样式/div
/body
/html
运行结果如下 1.方法一
运行代码如下
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title利用js修改CSS样式/titlestyle.box{width: 50%;height: 200px;color:blue;background-color: aliceblue;}/style
/head
bodydiv classbox iddiv1利用js修改CSS样式/divscriptvar e document.getElementById(div1);// 方式1: 展示更清晰e.style.backgroundColor red;e.style.color white;e.style.fontSize 30px;/script
/body
/html
运行结果如下 2.方法二
运行代码如下
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title利用js修改CSS样式/titlestyle.box{width: 50%;height: 200px;color:blue;background-color: aliceblue;}/style
/head
bodydiv classbox iddiv1利用js修改CSS样式/divscriptvar e document.getElementById(div1);// 方式2: 直接修改该节点的CSS代码// 利用反引号来解决过长字符串的换行问题以提高阅读性// 如何在键盘中输入反引号英文输入法下按左上角那个键e.style.cssText background-color: gray; color:green;font-size: 50px;;/script
/body
/html
运行结果如下
要理解其中的内容要自己敲打运行代码才能加深理解
