包头市住房与城乡建设部网站,o2o网站运维建设方案,wordpress安装编辑器,制图软件免费1、DOM概念 DOM 是 JavaScript 操作网页的接口#xff0c;全称为“文档对象模型”#xff08;Document Object Model#xff09; 当网页被加载时#xff0c;浏览器将网页转为一个DOM#xff0c;并用JS进行各种操作。比如#xff1a;改变页面中的HTML 元素及其属性#x…1、DOM概念 DOM 是 JavaScript 操作网页的接口全称为“文档对象模型”Document Object Model 当网页被加载时浏览器将网页转为一个DOM并用JS进行各种操作。比如改变页面中的HTML 元素及其属性改变页面中的CSS 样式对页面中的事件做出响应。 DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。 掌握基本的概念和函数即可后面会用JS库或者框架来简化操作直接用原生JS来实现动态网页的机会不多比如jQuery和Vue
2、DOM Tree树状结构 浏览器会根据 DOM 模型将结构化文档HTML解析成一系列的节点再由这些节点组成一个树状结构DOM Tree 最常用的节点类型 1 文档节点 document Nodes 表示整个文档 是DOM操作的起点
2元素节点 elemen Nodes 表示HTML元素例如div等
3属性节点 attribute Nodes 表示HTML 元素的属性
4文本节点 text Nodes 表示HTML 元素内的文本 节点间的关系 节点具有父子关系和同级关系等。除了根元素没有父节点其他元素都有父节点一个父节点可以有多个子节点
3、DOM操作
1获取已有的节点
1.getElementsByTagName () 通过搜索 HTML 标签名来获取节点返回符合条件的元素。它的返回值是一个类似数组的对象 若有多个相同标签返回含有多个节点的类数组对象
eg body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p script const p1 document.getElementsByTagName(p); console.log(p1); console.log(p1[0]);//输出p标签的第一个 console.log(p1[1]);//输出p标签的第二个 /script /body 2.getElementsByClassName 通过class名来获取节点 返回一个类似数组的对象包括了所有 class 名字符合指定条件的元素。 若有多个相同class返回含有多个节点的类数组对象
eg body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p script const p2 document.getElementsByClassName(pp); console.log(p2); /script /body 3.getElementById 通过id名来获取节点直接返回匹配指定 id 属性的元素节点而不是类似数组的对象
eg body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p script const p3 document.getElementById(p3); console.log(p3); /script /body 4.querySelectorAll 与 querySelector 用法类似区别是返回一个NodeList 对象包含所有匹配给定选择器的节点 通过CSS选择器获取节点返回NodeList对象包含所有匹配给定选择器的节点
eg body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p script const p4 document.querySelectorAll(.pp); console.log(p4); /script /body 5. querySelector 接受一个 CSS 选择器作为参数返回匹配该选择器的元素节点。如果有多个节点满足匹配条件则返回第一个匹配的节点。 通过CSS选择器获取节点返回第一个匹配上的节点
eg body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p script const p5 document.querySelector(.pp); console.log(p5); /script /body 2属性的查看与修改
1.id 属性 来读写当前元素节点的 id 名。
eg body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p script const p document.getElementById(p3); console.log(p); console.log(p.id); p.id _p_3; console.log(p.id); /script /body 以上代码获取id属性后修改id名为 _p_3
2.className 属性 用来读写当前元素节点的 class 名与id属性使用方法类似
eg body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p script const p document.getElementById(p3); console.log(p); console.log(p.className); p.className pp jj yy xx; console.log(p.className); /script /body 以上代码获取class属性后修改class 名为pp jj yy xx
3.classList 属性 是一个对象
有下列方法
add() 增加一个 class 名。
eg p4.classList.add(zz); remove() 移除一个 class 名。
eg p4.classList.remove(xx); contains() 检查当前元素是否包含某个 class 名返回布尔值。 eg console.log(p4.classList.contains(jj)); 4.innerHTML 返回一个字符串等同于该元素包含的所有HTML代码。 该属性可读写常用来设置某个节点的内容。它能改写所有元素节点的内容包括 HTML 和 body 元素。
eg body img src../xg.png alt图片加载失败 idimg1 script const i document.getElementById(img1); i.src ../th.jpg; console.log(照片: i.src); /script /body 修改前 修改后 5.innerText 和innerHTML类似不同的是innerText无法识别元素会直接渲染成字符串。
3新节点的创建
1.createElement 用来生成标签节点并返回该节点。
eg var p4 document.createElement(p); 2.createTextNode 用来生成文本节点并返回该节点它的参数是文本节点的内容。
eg var t4 document.createTextNode(我是段落5); 3. createAttribute 生成一个新的属性节点并返回该节点。可通过该节点的value属性对其赋值。 var a4 document.createAttribute(class); // 创建属性节点 a4.value fruit; // 为属性节点赋值 4新节点的插入
1. appendChild 为标签节点增加子节点
eg p4.appendChild(t4); 将文本节点作为子节点加入新建的p标签节点下面
2. setAttributeNode 为标签节点插入属性节点比如nameclassid, style等若此属性节点已经设置到别的元素节点则控制台会报错。
eg p4.setAttributeNode(a4); 将属性节点插入新建的p标签节点 3.插入bady标签中 最后不要忘了将已经配置号的p标签节点作为子节点插入body节点中
eg const body_node document.getElementsByTagName(body)[0]; body_node.appendChild(p4); 4、定时器函数
1setInterval 函数 指定某个任务每隔一段时间就执行一次无限次的定时执行
语法格式 setInterval(函数名, 时长单位为ms); eg body script function func1(){ console.log(定时任务: 喝水); } setInterval(func, 1000); /script /body 每隔1000ms执行一次定时任务无限重复
2setTimeout 函数 用来指定某个函数在多少毫秒之后执行(仅执行一次) 它返回一个整数表示定时器的编号如果突然想撤销这个定时任务可以用这个编号取消。若要定时执行多次只需多次调用setTimeout 即可。
语法格式 body script function func1(){ console.log(起床啦); } const time_id setTimeout(func2, 5000); clearTimeout(time_id); // 临时通知该定时器取消任务 /script /body 5秒以后仅仅执行一次定时任务返回的是该定时器唯一编码可利用该编码临时取消任务
5、 CSS样式操作
1方法一 直接独立修改节点style下面的各种属性ps 属性名与CSS键名有区别主要是小写变大写 eg body div classbox iddiv1利用js修改CSS样式/div script e.style.backgroundColor pink; e.style.color white; e.style.fontSize 30px; /script /body 运行后 2方法二 修改节点的CSS代码通过反引号实现
eg body div classbox iddiv1利用js修改CSS样式/div script e.style.cssText background-color: gray; color:pink; font-size: 50px; ; /script /body 运行后
