JavaScript高级程序设计（第四版）笔记 Node类型的各种方法

最新推荐文章于 2023-05-29 19:00:00 发布

Silent_crab

最新推荐文章于 2023-05-29 19:00:00 发布

阅读量137

点赞数

分类专栏：前端 JavaScript 文章标签： javascript dom

本文链接：https://blog.csdn.net/silent_crab/article/details/119777617

版权

前端同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

思维导图
在这里插入图片描述

先创建两个文档
在这里插入图片描述
html文档中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom学习</title>
</head>
<body>
<h1 id="h11">abcd</h1>

<div id="Div1">
  <h1>这是一个div</h1>
  <p>结点是指一台计算机或其他设备与一个有独立地址和具有传送或接收数据功能的网络相连。结点可以是工作站、客户、网络用户或个人计算机，还可以是服务器、打印机和其他网络连接的设备。每一个工作站，服务器、终端设备、网络设备即拥有自己唯一网络地址的设备都是网络结点。网络结点主要负责网络中信息的发送、接收和转发。网络结点是计算机与网络的接口，计算机通过网络结点向其他的计算机发送信息，鉴别和接收其他计算机发送过来的信息。在大型网络中，网络结点一般由一台处理机或通信控制器来担当，此时网络结点还具有存储转发和路径选择的功能，在局域网中使用的网络适配器也属于网络结点</p>
</div>
<div id="Div2">
  <article id="article1">
    <head>
      <h1>第二个div</h1>
      <p>发表日期：2021/8/18</p>
    </head>
    <p>Article，英语单词，名词、及物动词、不及物动词，作名词时意为“文章；物品；条款；[语] 冠词”。作及物动词时意为“订约将…收为学徒或见习生；使…受协议条款的约束”。作不及物动词时意为“签订协议；进行控告”。 [1]
</p>
      <footer>
          <small>著作版权</small>
      </footer>
  </article>

</div>
</body>
<script src="js02Dom.js"></script>
</html>

js中的代码

//nodeName和nodeValue
let element1 = document.getElementById('Div1');
if(element1){
    //nodeName显示元素的标签名
    let value = element1.nodeName;
    console.log(value);//div
    let nodevalue = element1.nodeValue;
    console.log(nodevalue);//null
}

//nodeValue显示文本结点 文档的值
let element2 = document.getElementById('h11').firstChild;
if(element2){
    let value= element2.nodeName;
    console.log(value);
    let name1=element2.nodeValue;
    console.log(name1);
}

//结点关系 :childNodes,包含一个Nodelist实例
let child = element1.childNodes;
console.log(child);
//用中括号或item()访问NodeList中的元素,使用类数组方式和item()得到同样的结果
console.log(child[0]===child.item(0));
console.log(child[3]);
//使用Array.prototype.sile()可以把类数组元素转化为数组
let arrayOfNodes=Array.prototype.slice.call(child,0);
console.log(arrayOfNodes);
//Array.from也可以达到同样的效果
let arrayOfNodes2 = Array.from(child);
console.log(arrayOfNodes2);

//parenNode,寻找父元素
let element3= document.getElementById('Div2');

let element3Parent = element3.parentNode;
console.log(element3Parent);
//找孩子，firstChild ,lastChild
console.log(element3.childNodes);
let element3FirstChild = element3.firstChild;
console.log(element3FirstChild);
let element3LastChild = element3.lastChild;
console.log(element3LastChild);

//找兄弟姐妹,nextSibling, previousSibling
let element3nextSibling = element3.nextSibling;
console.log(element3nextSibling);
let element3PreviousSibling = element3.previousSibling;
console.log(element3PreviousSibling);

let allElement3Sibling = element3Parent.childNodes;
console.log(allElement3Sibling);

//操纵结点
//appendChild（）可以在列表末尾增加结点，如果结点本身是存在的，就移动到新位置
let textNewNode = document.createTextNode('Hello world');
element3.appendChild(textNewNode);

//将新结点放到特定位置，而不是末尾
//insertBefore（新节点，参照结点）,要插入的节点就会变成参照节点的前一个同胞节点病返回
let textNewNode2 = document.createTextNode('New Node');
element3.insertBefore(textNewNode2,element3.childNodes[0]);

//replaceChild(),要插入的节点，要替换的节点,并返回

let textReplaceNode = document.createTextNode('replaceNode');
let replaceNode=element3.replaceChild(textReplaceNode,element3.lastChild);//替换最后一个节点
console.log(replaceNode);//返回：hello world
console.log(textReplaceNode);//replaceNode
console.log('element3.lastChild:',element3.lastChild);//replaceNode

//移除节点，并返回 removeChild(要移除的节点)
let removeNode = element3.removeChild(element3.lastChild);
console.log(removeNode,element3.lastChild);//replaceNode #text

//其他方法，克隆节点cloneNode()，返回一个调用它一模一样的，无父亲节点的孤儿节点
//cloneNode(true|false),是否深复制
//使用appendChild() insertBefore(),replaceChild()可以将孤儿节点添加到文档中
//浅复制不包含子节点
let deepClone = element3.cloneNode(true);
let shallowClone = element3.cloneNode(false);
console.log(deepClone.childNodes);
element3.appendChild(deepClone);
element3.appendChild(shallowClone);
console.log(element3.childNodes);

控制台输出结果
在这里插入图片描述

Silent_crab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序设计（第四版）笔记 Node类型的各种方法

思维导图先创建两个文档html文档中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Dom学习</title></head><body><h1 id="h11">abcd</h1><div id="Div1"> <h1>这是一个d
复制链接

扫一扫