HTML标签语义和浏览器API

最新推荐文章于 2024-09-11 15:33:18 发布

crazy~rabbit

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量236

点赞数

分类专栏：前端之路文章标签： javascript

本文链接：https://blog.csdn.net/qq_25776891/article/details/108077188

版权

前端之路专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 HTML标签语义

strong标签表示一个词在整个文章中的重要性，并不会改变语义；
em标签表示一个词在句子中应该重读，会强调一个句子的重要部分，比如我吃了<em>一个</em>苹果表示强调一个是重点，我吃了一个<em>苹果</em>强调苹果是重点。

对于逻辑上有顺序的列表，即使章节序号使用的是圆点，也应该使用ol而不是ul;

词的定义：dfn
预先调整好格式的文本：pre
举例：samp
代码：code

2 DOM API

在这里插入图片描述

2.1 导航类api

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

parentElement 其结果和parentNode 一致
children
firstElementChild
lastElementChild
nextElementSibling 下一个邻居
previousElementSibling 上一个邻居

2.2 修改类api

appendChild
insertBofore
removeChild，需要在parent上进行
replaceChild

2.3 DOM高级操作api

compareDocumentPosition 用于比较两个节点的关系；
contains 检查一个节点是否包含另一个节点；
isEqualNode 检查两个节点是否完全相同；
isSameNode 检查两个节点是否是同一个节点，在js中可以直接使用“===”；
cloneNode 复制一个节点，如果传入参数true，则会连同子元素做深拷贝。

2.4 事件api

target.addEventListener，详细用法，事件是先捕获后冒泡的

2.5 range api

2.5.1 创建range的两种方式

//方法一
let range = new Range();
range.setStart(element, 9);
range.setEnd(element, 4);

//方法二
let range = document.getSelection().getRangeAt(0);

2.5.2 其他选区设置api

由于在编写html文件时，对代码格式有要求，会存在换行或制表符等空白文本节点，所以提供以下api更好的定位range的起点和终点

range.setStartBefore
range.setEndBefore
range.setStartAfter
range.setEndAfter
range.selectNode，选中一个元素
range.selectContents，选中一个元素的内容

2.5.3 其他api

range.extractContents()，取出range中的内容，返回一个fragment对象
range.insertNode(document.createTextNode(‘aaa’))，向选区中插入节点

2.5.4 反转子节点

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>wiki</title>
</head>
<body>
    <div id="a">
        <span>1</span>
        <p>2</p>
        <a>3</a>
        <div>4</div>
    </div>
</body>
<script>
    let element = document.getElementById('a');
    function reverseChildren(element) {
        let children = Array.prototype.slice.call(element.childNodes);

        for(let child of children) {
            element.removeChild(child);
        }

        children.reverse();
        for(let child of children) {
            element.appendChild(child);
        }
    }

    function reverseChildren1(element) {
        let l = element.childNodes.length;
        while (l-- > 0) {
            element.appendChild(element.childNodes[l]);
        }
    }

    //减少了dom操作
    function reverseChildren3(element) {
        let range = new Range();
        range.selectNodeContents(element);

        let fragment = range.extractContents();
        let l = fragment.childNodes.length;
        while (l-- > 0) {
            fragment.appendChild(fragment.childNodes[l]);
        }
        element.appendChild(fragment);
    }

    reverseChildren3(element);
</script>
</html>