js的节点操作

最新推荐文章于 2024-07-18 20:18:56 发布

黑马金牌编程

最新推荐文章于 2024-07-18 20:18:56 发布

阅读量1.5k

点赞数 3

分类专栏：前端web开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/gyqailxj/article/details/122441712

版权

前端web开发专栏收录该内容

48 篇文章 6 订阅

订阅专栏

节点操作

5.1获取节点操作

在这里插入图片描述

5.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 (标准)

在这里插入图片描述

2.非标准浏览器都支持（实际开发常用）

在这里插入图片描述

2.子节点

5. parentNode.firstElementChild    //返回第一个子元素节点，找不到则返回null

6.parentNode.lastElementChild;    //返回最后一个子元素节点，找不到则返回null

注意：这两个方法有兼容性问题，IE9以上才支持。

实际开发中, firstChild和lastChild 包含其他节点,操作不方便,而firstElementchild和
lastElementChild又有兼容性问题,那么我们如何获取第一个子元素节点或最后-个子元素节点呢?

3.实际开发的写法既没有兼容性问题又返回第一个子元素

console.log(ol.children[0]);
console.log(ol.children[ol.children.length -1]);

<body>
   <ol>
       <li>我是li1</li>
       <li>我是li2</li>
       <li>我是li3</li>
       <li>我是li4</li>
       <li>我是li5</li>
   </ol>
   <script>
       var ol = document.querySelector('ol');
       //1. firstChild 第一个子节点  不管是文本节点还是元素节点
       console.log(ol.firstChild);
       console.log(ol.lastChild);
       //2.parentNode.firstElementChild 返回第一个子元素节点
       console.log(ol.firstElementChild);
       console.log(ol.lastElementChild);

       //3.实际开发的写法  既没有兼容性问题又返回第一个子元素
       console.log(ol.children[0]);
       console.log(ol.children[ol.children.length -1]);
   </script>

下拉菜单案例：

在这里插入图片描述

案例分析：

在这里插入图片描述

<script>
       // 1. 获取元素
       var nav = document.querySelector('.nav');
       var lis = nav.children; // 得到4个小li
       // 2.循环注册事件
       for (var i = 0; i < lis.length; i++) {
           lis[i].onmouseover = function() {
               this.children[1].style.display = 'block';
           }
           lis[i].onmouseout = function() {
               this.children[1].style.display = 'none';
           }
       }
   </script>

3.兄弟节点

在这里插入图片描述

如何解决兼容性问题？
答：自己封装一个兼容性的函数
在这里插入图片描述

5.节点操作

5.4创建节点

在这里插入图片描述

5.4添加节点

在这里插入图片描述

<body>
   <ul></ul>
   <script>
       //1.创建节点元素节点
       var li = document.createElement('li');
       //2.添加节点 node.appendChild(child) node 父级 child 是子级
       var ul = document.querySelector('ul');
       ul.appendChild(li);
       //3.添加节点 node.insertBefore(child,指定元素)；
       var lili = document.createElement('li');
       ul.insertBefore(lili,ul.children[0]);
       //4.我们想要页面添加一个新的元素：1.创建元素 2.添加元素
   </script>
</body>

发布评论案例：

在这里插入图片描述

案例分析：

核心思路:点击按钮之后,就动态创建一个li ,添加到ul里面。
创建li的同时,把文本域里面的值通过li.innerHTML赋值给li
如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore

  <style>
       * {
           margin: 0;
           padding: 0;
       }
       
       body {
           padding: 100px;
       }
       
       textarea {
           width: 200px;
           height: 100px;
           border: 1px solid pink;
           outline: none;
           resize: none;
       }
       
       ul {
           margin-top: 50px;
       }
       
       li {
           width: 300px;
           padding: 5px;
           background-color: rgb(245, 209, 243);
           color: red;
           font-size: 14px;
           margin: 15px 0;
       }
   </style>

</head>
<body>
   <textarea name="" id=""></textarea>
   <button>发布</button>
   <ul>

   </ul>
   <script>
       //1.获取元素
       var btn = document.querySelector('button');
       var text = document.querySelector('textarea');
       var ul = document.querySelector('ul');
       //2.注册事件
       btn.onclick = function(){
           if(text.value == ''){
               alert('您没有输入内容');
               return false;
           }else{
               //(1)创建元素
               var li = document.createElement('li');
               li.innerHTML = text.value;
               //(2)添加元素
               ul.insertBefore(li,ul.children[0]);
           }
           
       }
   </script>
</body>

删除节点案例：

案例分析：

在这里插入图片描述

//2.注册事件
       btn.onclick = function(){
           if(text.value == ''){
               alert('您没有输入内容');
               return false;
           }else{
               //(1)创建元素
               var li = document.createElement('li');
               li.innerHTML = text.value + "<a href='javascript:'>删除</a>";
               //(2)添加元素
               ul.insertBefore(li,ul.children[0]);
               //(3)删除元素 删除的是当前连接的li  它的父亲
               var as = document.querySelectorAll('a');
               for(var i=0; i<as.length;i++){
                   as[i].onclick  = function(){
                       //node.removeChild(child);删除的是li当前a所在的li  this.parentNode;
                       ul.removeChild(this.parentNode);
                   }
               }

```javascript

## 删除节点案例：

```javascript
<body>
   <button>删除</button>
   <ul>
       <li>熊大</li>
       <li>熊二</li>
       <li>光头强</li>

   </ul>
   <script>
       //1.获取元素
       var ul = document.querySelector('ul');
       var btn = document.querySelector('button');
       //2.删除元素    node removeChild(child)
       // ul.removeChild(ul.children[0]);
       //3.点击按钮依次删除里面的孩子
       btn.onclick = function(){
           if(ul.children.length == 0){
               this.disabled = true;
           }else{
               ul.removeChild(ul.children[0]);
           }
       }
   </script>
</body>

5.简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。

在这里插入图片描述

5.5节点操作

5.6复制节点（克隆节点）

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：

1.如果括号参数为空或者为false , 则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
2.如果括号参数为true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   <script>
       var ul = document.querySelector('ul');
       //1. node.cloneNode();  括号为空或者里面是false浅拷贝  只复制标签不复制里面的内容
       //2. node.cloneNode(true); 括号为true深拷贝  复制标签复制里面的内容
       var lili = ul.children[0].cloneNode(true);
       ul.appendChild(lili);
   </script>
</body>

动态生成表格案例：

案例分析：

在这里插入图片描述

<style>
       table{
           width: 500px;
           margin: 100px auto;
           border-collapse: collapse;
           text-align: center;
       }
       td,
       th{
           border: 1px solid #333;
       }
       thead tr{
           height: 40px;
           background-color: #ccc;
       }

   </style>
</head>
<body>
   <table cellspacing="0">
       <thead>
           <tr>
               <th>姓名</th>
               <th>科目</th>
               <th>成绩</th>
               <th>操作</th>
           </tr>
       </thead>
       <tbody>
           
       </tbody>
   </table>
   <script>
       //1.先去准备好学生的数据
       var datas = [{
           name: '张三',
           subject: 'JavaScript',
           score: 100
       },{
           name: '李四',
           subject: 'JavaScript',
           score: 98
       },{
           name: '张龙',
           subject: 'JavaScript',
           score: 99
       },{
           name: '赵虎',
           subject: 'JavaScript',
           score: 88
       }];
       //2.往tbody里面创建行:有几个人 (通过数组的长度)我们就创建几行
       var tbody = document.querySelector('tbody');
       for(var i=0;i<datas.length;i++){    //外面的for循环管行tr
           //创建tr行
           var tr = document.createElement('tr');
           tbody.appendChild(tr);
           //行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数
           for(var k in datas[i]){ //里面的for循环管列td
               //创建单元格
               var td =document.createElement('td');
               //把对象里面的属性值 datas[i][k] 给 td
              // console.log(datas[i][k]);
               td.innerHTML = datas[i][k];
               tr.appendChild(td);
           }
           //3.创建有删除2个字的单元格
           var td = document.createElement('td');
           td.innerHTML = '<a href="javascript:;">删除</a>';
           tr.appendChild(td);
       }
       //4.删除操作  开始
       var as =document.querySelectorAll('a');
       for(var i = 0;i<as.length;i++){
           as[i].onclick=function(){
               //点击a删除  当前a  所在的行（链接的爸爸的爸爸）node.removeChild(child)
               tbody.removeChild(this.parentNode.parentNode)
           }
       }
       //for(var k in obj){
       //     k 得到的是属性名
       //     objp[k]得到的是属性值
       // }

   </script>
</body>

5.8三种动态创建元素区别

在这里插入图片描述

区别：

document .write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘

黑马金牌编程

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
js的节点操作

节点操作5.1获取节点操作5.2节点概述网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。一般地,节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个基本属性。元素节点nodeType为1属性节点nodeType为2文本节点nodeType为3 ( 文
复制链接

扫一扫