JS第二天

最新推荐文章于 2023-08-18 23:23:16 发布

狗都不干机械

最新推荐文章于 2023-08-18 23:23:16 发布

阅读量185

点赞数

文章标签： js css javascript dom

本文链接：https://blog.csdn.net/I_love_bc/article/details/115376653

版权

JS核心第二天

一.节点操作

1.如何获取节点

获取元素通常使用两种方式:

1.利用DOM提供的方法获取元素
●document.getElementByld(
●document.getElementsByTagName
●document.querySelector等
缺点：逻辑性不强、繁琐

2.利用节点层级关系获取元素
●利用父子兄节点关系获取元素
●逻辑性强,但是兼容性稍差

2.什么是节点

网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,可以创建或删除。

一般地 ,节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个基本属性。
●元素节点nodeType 为1
●属性节点nodeType为2
●文本节点nodeType 为3 (文本节点包含文字、空格、换行等)
我们在实际开发中,节点操作主要操作的是元素节点。

5.3节点层级

利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
1. 父级节点
node . parentNode
●parentNode属性可返回某节点的父节点,注意是最近的一个父节点
●如果指定的节点没有父节点则返回null

2. 子节点
（1）parentNode. childNodes (标准)
parentNode. childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。
注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes
处理代码如下：

var ul = document. que rySelector('ul') ;
for(var i = 0; i < ul.childNodes.length; i++) {
   
if (ul.childNodes[i].nodeType == 1) {
   
// ul.childNodes[i]是元素节点
console.log (ul.childNodes[i]) ;
	}
}

（2）parentNode. children (非标准)
parentNode. children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回

（3）parentNode.firstChild
firstChild返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
（4）parentNode.lastChild
lastChild返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点。

（5） parentNode . firstElementChild
firstElementChild返回第一个子元素节点,找不到则返回null。
（6）parentNode.lastElementChild
lastElementChild返回最后一个子元素节点,找不到则返回null。
注意:这两个方法有兼容性问题, IE9以上才支持。

实际开发中, firstChild和lastChild 包含其他节点,操作不方便,而firstElementChild 和
lastElementChild又有兼容性问题
解决方案:

如果想要第一个子元素节点,可以使用parentNode.chilren [0]
如果想要最后一个子元素节点,可以使用parentNode.chilren [parentNode.chilren.length-1]

3. 兄弟节点
（1）node.nextSibling
nextsibling返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点。
（2）node.previousSibling
previoussibling返回当前元素上一个兄弟节点 ,找不到则返回null。同样,也是包含所有的节点。
(3) node.nextElementsibling
nextElementsibling返回当前元素下一个兄弟元素节点,找不到则返回null。
(4) node.previousElementsibling
previousElementsibling返回当前元素上一个兄弟节点,找不到则返回null。
注意:这两个方法有兼容性问题，IE9 以上才支持(解决方法见积累)。

4.创建，添加节点
(1)创建
document . createElement ( 'tagName ')
document. createElement()方法创建由tagName 指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。

(2)添加

node . appendChild (child)
node . appendChild()方法将-一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
node. insertBefore (child,指定元素)
node . insertBe fore ()方法将-个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

5.删除节点
node. removeChild (child)
node. removeChild()方法从DOM中删除一个子节点,返回删除的节点。

6.复制节点
node. cloneNode ()
node . cloneNode ()方法返回调用该方法的节点的一一个副本。也称为克隆节点/拷贝节点
注意:
1.如果括号参数为空或者为false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
2.如果括号参数为true , 则是深拷贝,会复制节点本身以及里面所有的子节点。

7.三种动态创建元素的区别
●document.write ()
●element.innerHTM
●document. createElement ()
区别

document .write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘
innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接) , 结构稍微复杂
createElement() 创建多个元素效率稍低一点点,但是结构更清晰

二.案例

1.表单的选择

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            padding: 0;
            margin: 0;
        }
        .wrap {
   
            margin: 100px auto 0;
            width: 300px;
        }
        table {
   
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid rgb(194, 192, 192);
            width: 300px;
        }
        th,
        td {
   
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
   
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;

最低0.47元/天解锁文章

狗都不干机械

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS第二天

JS核心第二天一.节点操作1.如何获取节点获取元素通常使用两种方式:1.利用DOM提供的方法获取元素●document.getElementByld(●document.getElementsByTagName●document.querySelector等缺点：逻辑性不强、繁琐2.利用节点层级关系获取元素●利用父子兄节点关系获取元素●逻辑性强,但是兼容性稍差2.什么是节点网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。HTML
复制链接

扫一扫