会飞的鱼

2020
Godam
首页 » 学习笔记 » Day 06 JS节点用法

Day 06 JS节点用法

前言

    感觉进展很慢....

    学习效率十分低,时间和收获不成正比。

正文

什么是节点

    在W3school里找到了下面的描述:

    根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

    HTML中的每一个元素都可以称之为一个节点。

节点的运用

一、通过元素间的层级关系获取元素

    我们来看一下W3school中给出的例子:

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>
从上面的 HTML 中:
  • <html> 节点没有父节点;它是根节点
  • <head> 和 <body> 的父节点是 <html> 节点
  • 文本节点 "Hello world!" 的父节点是 <p> 节点
并且:
  • <html> 节点拥有两个子节点:<head> 和 <body>
  • <head> 节点拥有一个子节点:<title> 节点
  • <title> 节点也拥有一个子节点:文本节点 "DOM 教程"
  • <h1> 和 <p> 节点是同胞节点,同时也是 <body> 的子节点
并且:
  • <head> 元素是 <html> 元素的首个子节点
  • <body> 元素是 <html> 元素的最后一个子节点
  • <h1> 元素是 <body> 元素的首个子节点
  • <p> 元素是 <body> 元素的最后一个子节点
    由此可看出层级间的嵌套包含关系。下面其代码规则:
  • 元素.parentNode  //获取父元素节点
  • 元素.firstElementChild  //获取第一个子节点,也有firstChild来获取的
  • 元素.children  //获取所有子节点
  • 元素.ownerDocument  //获取该节点文档根节点
  • 元素.previousElementSibling //获取当前节点的前一个同级节点
  • 元素.nextElementSibling //获取当前节点的后一个同级节点
    在使用节点时,我们首先应该创建一个节点:


<script>
//这里我们创建了一个新的节点
//它代表着标签P
var para = document.createElement("p");
//我们创建一个新的文本节点
var node = document.createTextNode("这是一个新的段落。");
//将文本节点添加为P节点的最后一个子节点
para.appendChild(node);
 
var element = document.getElementById("div1");
//将para节点插入到element节点中作为最后一个子节点
element.appendChild(para);
</script>
     在上述实例中,我们使用了qppendChild方法,它是将节点作为最后一个子节点插入到已有节点中。


    我们也可以使用element.insertBefore(para, child);将元素作为第一个子节点插入。

二、firstChild 与 firstElementChild 的区别

    在上文中,我们已经提到在一个HTML文档中,任何元素都会作为一个节点,如:代码中存在的空格、代码中的注释、代码的各种标签。下面我们通过一个实例来了解这两者的区别:

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<titlie>示例</title>
</head>
<body>
<ul id="nodeList" style="color: aqua;">
	<!--在这里我们添加注释-->
	<li>one</li>
	<li>two</li>
	<li>three</li>
</ul>
<p id="second">第二个</p>
<script>
	var nodes=document.getElementById("nodeList");
	var OneNode=nodes.firstchild;//我们来获取他的第一个子节点
	alert(OneNode);//将其弹出内容
//我们使用加上element的语法来试一下
	var FirstNode=nodes.firstElementChild.nodeName;
	alert(FirstNode);
</script>

</body>
</html>

    纪念一下第一次写博客完全自己敲的代码

    咳咳,我们继续讨论,对于这段代码,通过运行可以很清楚的知道发生了什么,第一个alert显示除了undefined,这是因为在我们的id为“nodeList”标签后面紧跟着的事空格,这将会被firstChild识别为它的第一个子节点,而firstElementChild会将其第一个子标签作为第一个子节点返回,这便是他们之间的差异。

    概括来说不加Element时,所有节点均被计算进,空格、注释都会被“当做”节点处理,而加上之后,其选择的就只有Html元素了。


QQ图片20200305010004.png


三、节点究竟有什么作用

    我竟然没有找到关于这个问题的博客文章。。

    是不是这个问题很显而易见。。。

    太难了,但是在万能的B站找到了课工厂关于JS节点的视频(太感谢课工厂了似乎难点都有视频 前些天的闭包也有)。

    看了之后,感觉节点的作用主要是用来定位元素,同过元素之间的层级关系来方便的查找管理元素,由于举例有些麻烦,在这里就直接放B站链接吧。

    (为啥博客写的这么慢 写了一个多小时了)

https://www.bilibili.com/video/av73913234?p=4

结语

    下面这一篇是对上述一些操作的具体讲解,也是课工厂的,感觉很不错

https://www.bilibili.com/video/av74018893?from=search&seid=16490555182355110148


文章如无特别注明均为原创! 作者: 果果, 转载或复制请以 超链接形式 并注明出处 GODAM|博客|godam
原文地址《 Day 06 JS节点用法》发布于2020-3-5

分享到:
打赏

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

sitemap