day19找到那个DOM

最新推荐文章于 2020-12-17 20:13:05 发布

RealRecall

最新推荐文章于 2020-12-17 20:13:05 发布

阅读量114

点赞数

分类专栏：初学前端开发

本文链接：https://blog.csdn.net/RealRecall/article/details/110186426

版权

初学前端开发专栏收录该内容

46 篇文章 1 订阅

订阅专栏

学习时间:2小时

DOM

当网页被加载时，浏览器会创建页面的文档对象模型（DOM）（Document Object Model）。
DOM 定义了访问文档的标准。
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

HTML DOM 是关于如何获取、更改、添加或删除（增删改获） HTML 元素的标准。

节点

文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点。
元素节点、根节点、子节点、后代节点、父节点、兄弟节点、文本节点。

基本的DOM 操作

要操作DOM内的元素，首先需要选择它，并将它的引用存储在一个变量中：

var link = document.querySelector('a');

更新 Node.textContent属性的值来修改链接中的文字：

link.textContent = 'Mozilla Developer Network';

我们也能修改链接指向的URL，使得它被点击时不会走向错误的位置：

link.href = 'https://developer.mozilla.org';

有很多方法可以选择一个元素，并在一个变量中存储一个引用。Document.querySelector()是推荐的主流方法，它允许你使用CSS选择器选择元素，使用很方便。上面的querySelector()调用会匹配它在文档中遇到的第一个<a>元素。如果想对多个元素进行匹配和操作，你可以使用Document.querySelectorAll()，这个方法匹配文档中每个匹配选择器的元素，并把它们的引用存储在一个类数组中。
还有一些更旧的方法:Document.getElementById()，选择一个id属性值已知的元素.
Document.getElementsByTagName()返回一个包括所有给定标签名称的元素的HTML类数组，返回的 HTML类数组是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用。
类数组是由array-like翻译的，是一个特殊的对象，以后再说！

创建并放置新的节点

源代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple DOM example</title>
  </head>
  <body>
      <section>
        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
      </section>
  </body>
</html>

添加JS：

      var sect = document.querySelector("section");
      var para = document.createElement("p");//创建一个新的段落
      para.textContent = "We hope you enjoyed the ride.";//新段落内的文本
      sect.appendChild(para);//认领段落为儿子
      var text = document.createTextNode(
        " — the premier source for web development knowledge."
      );//创建一个文本节点
      var linkPara = document.querySelector("p");//查到第一个p标签
      linkPara.appendChild(text);//认领文本节点为儿子

JS运行后的代码：

<html>
  <head>
    <meta charset="utf-8" />
    <title>Simple DOM example</title>
  </head>
  <body>
    <section>
      <img
        src="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dinosaur.png"
        alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
      />
      <p>
        Here we will add a link to the
        <a href="https://www.mozilla.org/">Mozilla homepage</a>
        — the premier source for web development knowledge.
      </p>
      <p>We hope you enjoyed the ride.</p>
    </section>
  </body>
</html>

移动和删除元素

（移动）如果你想把具有内部链接的段落移到sectioin的底部，简单的做法是：

sect.appendChild(linkPara);//重新添加一次儿子即可。

（删除）拥有要删除的节点和其父节点的引用

sect.removeChild(linkPara);

（删除）仅基于自身引用的节点可能稍微有点复杂，这也是很常见的。没有方法会告诉节点删除自己，所以必须像下面这样操作：

linkPara.parentNode.removeChild(linkPara);//让父亲删除自己。

操作样式

一、
可以设置这个对象的属性直接修改元素样式。

para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';

二、
使用HTML操作的常用方法 — Element.setAttribute()
这里有两个参数，你想在元素上设置的属性，你要为它设置的值。在这种情况下，我们在段落中设置类名为highlight：

para.setAttribute('class', 'highlight');

创建静态内容时，最好将js写入html中的script。“使用JavaScript创建静态内容是毫无意义的”
node（节点、对象。）

从Window对象中获取有用的信息

获取视窗（显示文档的内部窗口）的宽度和高度： Window.innerWidth 和 Window.innerHeight
Window.onresize 事件。每次窗口调整大小时都会触发该事件。

window.onresize = function() {
  WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight;
  div.style.width = WIDTH + 'px';
  div.style.height = HEIGHT + 'px';
}

查找元素练习

多次使用方法找到要求位置，利用for循环输出。

      function findListItem(sectionId, spanCont) {
        let lis = document.getElementById(sectionId).getElementsByTagName("li");
        for (let i = 0; i < lis.length; i++) {
          if (lis[i].getElementsByTagName("span")[0].textContent == spanCont) {
            console.log(lis[i]);
          }
        }
        // 返回某个section下，所有所包含span内容为spanCont的LI标签
      }

      function getActiveLinkContent(sectionId) {
        let as = document.getElementById(sectionId).getElementsByTagName("a");
        for (let i = 0; i < as.length; i++) {
          if (as[i].className == "active") {
            console.log(as[i].textContent)
          }
        }
        // 返回某个section下，class为active的链接中包含的文字内容
      }

RealRecall

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day19找到那个DOM

学习时间DOM当网页被加载时，浏览器会创建页面的文档对象模型（DOM）（Document Object Model）。DOM 定义了访问文档的标准。“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分：Core DOM - 所有文档类型的标准模型XML DOM - XML 文档的标准模型HTML DOM - HTML 文档的标准模型HTML DOM 是关于如何获取、更改、添
复制链接

扫一扫

专栏目录