首页 > 其他分享> > HTML+JS相关知识点

HTML+JS相关知识点

2022-03-27 11:32:26 作者：互联网

DOM

> DOM=DocumentObjectModel，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构
理解为浏览器会把HTML文档解析为一个对象。就像一个树一样。比如<html>下面会有<head>和<body>然后其他标签都是这棵树上的数值和树叶。

节点种类 12

> 元素节点　　Node.ELEMENT_NODE(1) > 属性节点　　Node.ATTRIBUTE_NODE(2) > 文本节点　　Node.TEXT_NODE(3) > CDATA节点 Node.CDATA_SECTION_NODE(4) > 实体引用名称节点　　 Node.ENTRY_REFERENCE_NODE(5) > 实体名称节点　　Node.ENTITY_NODE(6) > 处理指令节点　　Node.PROCESSING_INSTRUCTION_NODE(7) > 注释节点　 Node.COMMENT_NODE(8) > 文档节点　 Node.DOCUMENT_NODE(9) > 文档类型节点　　Node.DOCUMENT_TYPE_NODE(10) > 文档片段节点　　Node.DOCUMENT_FRAGMENT_NODE(11) > DTD声明节点 Node.NOTATION_NODE(12) 节点遍历

比较 innerText、 nodeValue、 textContent

这三个api都是取某一个文本内容

<div id="app">
    水果
        <!-- 注释 -->
        <p>
            菠萝
            <style>
                red {
                    background-color: rgb(34, 97, 139);
                }
            </style>
            <div style="display: none;">
                头
            </div>
        </p>
    </p>
</div>

举例View Code

nodeValue：只能取文本节点的内容。

const app = document.getElementById('app')
console.log(app.nodeValue) // null

const app = document.getElementById('app')
console.log(app.childNodes[0].nodeValue) // null
console.log(app.childNodes[1].nodeValue) // null

innerText

innerHTML与innerText

这两个api的区别功能是从起始位置到终止位置的内容, 区别在于是否去除Html标签。

  console.log("innerText", app.innerText);//取内容 过滤了源代码
  console.log('innerHTML',app.innerHTML)//取代码

textContent

功能是textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。

与innerText的区别

- 会获取style=“display:none”中的文本
- 会获取style标签中的文本
- 不解析html更快捷性能好

  console.log("textContent", app.textContent);

语义化标签

<header>
  <h1>html5语义化标签</h1>
  <nav>
    <h1>导航</h1>
  <ul>
    <li>章节标签</li>
  <li>标题标签</li>
  </ul>
  </nav>
</header>

优势

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。

<title>：页面主题内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

常见语义化标签

<html>
    <head>
        <title>HTML</title>
    </head>
    <body>
        <aside></aside>  
        <header></header>
        <main></main>
          <footer></footer>
    </body>
</html>

导航栏

            <nav>
                <h2>导航栏</h2>
                <ol>
                    <li>音乐</li>
                    <li>新闻</li>
                    <li>科技</li>
                    <li>视频</li>
                </ol>
            </nav>

段落——使用section标记+h1就可以非常简单的完成标题分级

<article>
    <h1>一、大标题</h1>
    <section>
        <h1>1. 小标题</h1>
        <section>
            <h1>1.1 小标题</h1>
        </section>
    </section>
</article>

内容

    正文<q>引述2</q>
    <del>删除的内容</del>
    <ins>添加的内容</ins>

图片引用

    <figure>
        <img src="xxx.png" alt="">
        <figcaption>HTML5Logo</figcaption>
    </figure>

figure:规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
figcaption: 内容标题

<pre><!-- 预格式化文本 保留空格和换行符-->
    <code>
        exports.call = function (context, ...args) {
            // this 为调用方法 例:f.call this = f
            context.fn = this;
            const result = context.fn(...args);
            delete context.fn;
            return result;
            };
                            </code>
        ✅ 运行结果标签：Node,知识点,浏览器,NODE,JS,HTML,文档,navigator,节点	

来源： https://www.cnblogs.com/clematis/p/16062243.html

HTML+JS相关知识点

节点种类 12

比较 innerText、 nodeValue、 textContent

nodeValue：只能取文本节点的内容。

innerHTML与innerText

语义化标签