• DOM

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

• 节点种类 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都是取某一个文本内容

    水果
        
        

            菠萝
            
            

                头
            
        

    

举例

• 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);

   

• 语义化标签

  
html5语义化标签
  

• 优势

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

导航栏

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

    
一、大标题
    

        
1. 小标题
        

            
1.1 小标题
        
    

 内容

    正文引述2
    删除的内容
    添加的内容

图片引用

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

• figcaption: 内容标题

    
        exports.call = function (context, ...args) {
            // this 为调用方法 例:f.call this = f
            context.fn = this;
            const result = context.fn(...args);
            delete context.fn;
            return result;
            };
                            
        ? 运行结果??:
                            
        (base) ?  call-apply-bind git:(master) ? jest ../call-apply-bind
        PASS  __tests__/index.spec.js
            实现call 、apply、 bind函数
            ? 测试call方法 (7 ms)
            ? 测试apply方法 (1 ms)
            ? 测试bind方法 (1 ms)
        
        Test Suites: 1 passed, 1 total
        Tests:       3 passed, 3 total
        Snapshots:   0 total
        Time:        1.657 s
        Ran all test suites matching /..\/call-apply-bind/i.
        (base) ?  call-apply-bind git:(master) ?