HTML5节点备忘单:2020年您应该知道的21个API

2020年12月30日11:15:33 发表评论 32 次浏览

本文概述

这份快速的HTML节点指南将介绍H​​TML DOM节点中21种最受欢迎​​和使用最广泛的API:

  1. getElementById(id)

  2. getElementsByClassName(班级名称)

  3. getElementsByTagName(标签名称)

  4. getSelection()

  5. getElementsByName和querySelector(选择器)

  6. querySelectorAll(选择器)

  7. parentNode.insertBefore(newNode, refNode)

  8. appendChild(节点)

  9. createElement(elementName)

  10. createTextNode(textString)

  11. removeChild(childNode)

  12. replaceChild(newNode, childNode)

  13. setAttribute(attrKey, 属性值)

  14. getAttribute(attrKey)

  15. getAttributeNames()

  16. cloneNode()

  17. classList

  18. parentNode

  19. parentElement

  20. innerHTML

  21. innerText

在开发Web框架之前, 每个开发人员都应唾手可得这些API。掌握它们是建立对何时以及如何使用框架的基础理解的最佳方法。

让我们潜入。

1.getElementById(id)

getElementById(id)通过其元素返回元素的Node实例id属性。

<div id="div1">Div 1</div>
<p id="par1">I'm a Paragraph</p>

获取的DOM实例1使用getElementById方法, 传递其ID, div1, 方法。

const div1Node = document.getElementById("div1")

div1Node是的对象或实例HTMLDivElement.

获取的DOM实例我是一个段落, 传递其ID, 杆1.

const par1Node = document.getElementById("par1")

par1Node是的对象或实例HTMLParagraphElement.

使用这些实例, 我们可以对元素进行操作或执行操作。

2.getElementsByClassName(className)

此方法返回一个集合(HTMLCollection)其属性的DOM节点类值等于班级名称串。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

HTML5节点备忘单:2020年您应该知道的21个API1
<div class="tab-body">
    <div class="tab-content tab-active">
        Div 1
    </div>        
    <div class="tab-content">
        Div 2
    </div>
    <div class="tab-content">
        Div 3
    </div>
</div>

我们的div具有以下属性类名称标签主体, 标签内容和选项卡。所有这些都是类名。类名是类在元素上设置的属性。

使用以下命令获取div的DOM节点类名称标签内容, 请getElementsByClassName()通过方法标签内容作为arg。

>> document.getElementsByClassName("tab-content")

// HTMLCollection
0: <div class="tab-content tab-active">​
1: <div class="tab-content">​
2: <div class="tab-content">​
length: 3

如你所见, 它返回div的集合。它实际上是一个数组, 因为我们可以使用数字索引。你可能会猜到, 第一个元素是第1分部, 第二个元素是2区, 第三个元素是3区.

3.getElementsByTagName(tagName)

这将返回其标签名称(元素名称)等于的DOM节点的集合。标签名称指定的字符串。

标签名称将由元素名称组成, 例如div, p, img, 视频, b, 一世, br, 纽扣, 输入等

<div>
    Div 1
</div>        
<div>
    Div 2
</div>        

<p>
    I'm Paragraph 1
</p>
<p>
    I'm Paragraph 2
</p>

<button>Button 1</button>
<button>Button 2</button>

如果你打电话getElementsByTagName()与精氨酸, 它将返回HTML中的div。

document.getElementsByTagName("div")

// HTMLCollection
0: <div>​ Div 1
1: <div>​ Div 2
length: 2

通过p返回所有段落元素。

document.getElementsByTagName("p")

// HTMLCollection
0: <p>​ I'm Paragraph 1
1: <p>​ I'm Paragraph 2
length: 2

通过纽扣返回所有按钮元素。

document.getElementsByTagName("button")

// HTMLCollection
// 0: <button>​ Button 1
// 1: <button>​ Button 2
// length: 2

4.getSelection()

此方法返回在文档中选择的文本的文本节点。该选定的文本区域是使用鼠标或触摸屏中的手指在文档中突出显示的区域。

该方法返回选拔。该对象有一个anchorNode属性, 其值是突出显示的文本的文本节点。

<div>I'm Div1</div>

如果你突出显示我是Div1, document.getSlection()将返回对象。

document.getSelection()

// Selection
//    anchorNode: #text
//    ...

的anchorNode是一个文本节点, 其nodeValueis分区1, 突出显示的文本。

// TODO: Complete this.

5.getElementsByName和querySelector(选择器)

此方法将返回DOM节点的第一个匹配项, 并带有选择器指定的字符串。

的选择器字符串可以是:

  • 元素名称(或标签名称)
  • 班级名称
  • 身份证名

让我们放大每种情况。

元素或标签名称

的选择器将是元素的名称。

<div>
    Div 1
</div>        
<div>
    Div 2
</div>
<div>
    Div 3
</div>
document.querySelector("div")

>> div Div 1

它将返回div元素的首次出现-在这种情况下, 第1分部.

班级名称

要获取元素的属性类名称, 类名称arg前面加一个点..

<div class="tab div1">
    Div 1
</div>        
<div class="tab div2">
    Div 2
</div>
<div class="div3">
    Div 3
</div>

与班级div1:

document.querySelector(".div1")

>> div Div 1

我们从一个点开始(.), 然后是类名。

与班级div2:

document.querySelector(".div2")

>> div Div 2

如果你通过。标签, 有两个div标签类名。仅返回第一个div。

document.querySelector(".tab")

>> div Div 1

身份证名

要获取具有其IS名称的元素, 请在ID名称arg之前添加一个哈希#.

<div id="div1">
    Div 1
</div>        
<div id="div2">
    Div 2
</div>
<div id="div3">
    Div 3
</div>

要获取ID为" div1"的div, 请执行以下操作:

document.querySelector("#div1")

注意哈希的使用#。我们从#然后是ID名称。

这将返回div第1分部.

6.querySelectorAll(选择器)

这将返回所有出现的NodeList选择器在文档中。

同样, 选择器可能是:

  • 元素名称
  • 班级名称
  • 身份证名

元素名称

<div>
    Div 1
</div>        
<div>
    Div 2
</div>
<div>
    Div 3
</div>
<p>
    I'm Paragraph 1
</p>
<p>
    I'm Paragraph 2
</p>

要选择所有div, 请通过div的方法。

document.querySelectorAll("div")

// NodeList(3)
//  0: div Div 1
//  1: div Div 2
//  2: div Div 3

它返回一个节点列表所有的div。节点列表就像一个数组, 因此你可以按索引引用元素。

再一次, 第一个元素是第1分部, 第二个是2区, 第三个是3区.

班级名称

通过元素的类名查询元素。

<div class="tab div1">
    Div 1
</div>        
<div class="div2">
    Div 2
</div>
<p class="tab par1">
    I'm Paragraph
</p>

用类名查询元素标签, 通过。标签(点名后跟类名)。

document.querySelectorAll(".tab")

// NodeList(2)
//  0: div Div 1
//  1: p I'm Paragraph

它返回第1分部和我是段落元素, 因为它们具有类名标签.

身份证名

这查询具有指定的元素id属性值。 arg以散列号(#), 然后紧跟ID名称。

在这种情况下, ids是唯一的。如果你分配相同的id如果值大于一个元素, 浏览器将采用第一个元素, 而忽略其余元素。使用getElementById传回nullid的值分配给多个元素。但是用这个querySelectorAll返回所有具有指定元素的元素id值。

<div class="div1" id="tab">
    Div 1
</div>        
<div class="div2" id="tab">
    Div 2
</div>
<p class="tab par1" id="par1">
    I'm Paragraph
</p>

要获得元素标签 ids:

document.querySelectorAll("#tab")

// NodeList(2)
//  0: div Div 1
//  1: div Div 2

第1分部和2区之所以返回, 是因为它们具有ID标签.

7.parentNode.insertBefore(newNode, refNode)

此方法将Node放置在子Node之前refNode在一个parentNode。的newNode紧接着是refNode, 都是孩子的parentNode.

<div id="parent">
    Parent Node
    <div id="child">Child Node</div>
</div>

将元素放置在#儿童, 使用insertBefore方法。

const newNode = document.createElement("b")
newNode.appendChild(document.createTextNode("Bold Child Node"))

parent.insertBefore(newNode, child)

在这里我们创建了一个b带有文本节点的粗体元素粗体子节点并使用了insertBefore将其插入之前的方法#儿童中的节点#parent.

HTML看起来像这样:

<div id="parent">
    Parent Node
    <b>Bold Child Node</b>
    <div id="child">Child Node</div>
</div>

如果你引用DOM中的现有节点, 则该节点将从其位置中删除, 并放置在新位置中。

<div>
    Other Node
    <div id="othernode">
        Other Node Child
    </div>
</div>

<div id="parent">
    Parent Node
    <div id="child">Child Node</div>
</div>

我们要使用insertBefore插入#othernodeto#parent在它的孩子之前#儿童.

parent.insertBefore(othernode, child)

这删除#othernode从其父节点其他节点放在里面#parent在它之前#child节点.

结果:

<div>
    Other Node
</div>

<div id="parent">
    Parent Node
    <div id="othernode">
        Other Node Child
    </div>
    <div id="child">Child Node</div>
</div>

8.appendChild(node)

此方法将节点添加到元素作为其最后一个子元素。

<div id="divNode">
    <div>Div Node Child</div>
    <div>Div Node Child</div>
    <p>Paragraph Node Child</p>
</div>

追加一个p元素#divNode使用appendChild:

const pEl = document.createElement("p")
pEl.append(createTextNode("Paragraph Node Child"))

divNode.appendChild(pEl)

结果:

<div id="divNode">
    <div>Div Node Child</div>
    <div>Div Node Child</div>
    <p>Paragraph Node Child</p>
    <p>Paragraph Node Child</p>    
</div>

一个新的p节点被添加到#divNode.

如果该节点是文档中的现有节点, 则将从其位置中删除该节点。

<p id="pNode">Paragraph Node</p>    

<div id="divNode">
    <div>Div Node Child</div>
    <div>Div Node Child</div>
    <p>Div Node Child</p>
</div>

追加中p#pNodeto#divNode将删除p#pNode从其原始位置开始。

divNode.appendChild(pNode)

结果:

<div id="divNode">
    <div>Div Node Child</div>
    <div>Div Node Child</div>
    <p>Div Node Child</p>
    <p id="pNode">Paragraph Node</p>    
</div>

9.createElement(elementName)

此方法创建指定元素的Node。的elementNamearg是要创建的元素Node的字符串值。

要创建div点, 请传递div。一个按钮节点将是"按钮"等

const divNode = document.createElement("div")
const buttonNode = document.createElement("button")

divNode将是HTMLDivElement目的。buttonNode将是HTMLButtonElement目的。

由此创建的所有元素节点都具有以下基础继承HTMLElement.

divNode instanceof HTMLDivElement
>> true

divNode instanceof HTMLElement
>> true

buttonNode instanceof HTMLButtonElement
>> true

buttonNode instanceof HTMLElement
>> true

返回的元素节点用于对节点及其子节点进行操作并执行操作。

10.createTextNode(textString)

此方法创建一个Text节点。文本节点用于表示DOM或元素中将放置文本的位置。

要将文本放置在元素中, 必须首先通过调用以下命令创建一个Text节点createTextNode文本字符串为arg, 然后将文本节点附加到元素。

<div id="parentNode">
    <div>Child Node</div>
</div>

放置文字#parentNode:

parentNode.appendChild(document.createTextNode("Text"))

结果:

<div id="parentNode">
    <div>Child Node</div>
    Text
</div>

11.removeChild(childNode)

这将从节点中删除子节点及其子节点。

<div id="parentNode">
    <div id="childNode1">Child Node 1</div>
    <div id="childNode2">Child Node 2</div>
    <div id="childNode3">Child Node 3</div>
</div>

去除#childNode1从#parentNode:

parentNode.removeChild(childNode1)

结果:

<div id="parentNode">
    <div id="childNode2">Child Node 2</div>
    <div id="childNode3">Child Node 3</div>
</div>

要删除的节点必须是参考节点的子节点。尝试删除不是指定节点的子节点的节点将抛出NotFoundError.

NotFoundError: Node.removeChild: The node to be removed is not a child of this node

尝试删除不存在的东西会抛出ReferenceError.

ReferenceError: childNode11 is not defined

12.replaceChild(newNode, childNode)

此方法用指定的节点替换父节点中的子节点。

的newNode是要替换的节点chidlNode父节点的

的newNode取代childNode可以是父节点的子节点。

<div id="node">Node 1</div>

<div id="parentNode">
    <div id="childNode2">Child Node 2</div>
    <div id="childNode3">Child Node 3</div>
</div>

取代#childNode2in#parentNode与#节点:

parentNode.replaceChild(node, childNode2)

结果:

<div id="parentNode">
    <div id="node">Node 1</div>
    <div id="childNode3">Child Node 3</div>
</div>

#节点从其原始位置移走并替换为#childNode2在其内部的位置#parent.

<div id="parentNode">
    <div id="childNode1">Child Node 1</div>
    <div id="childNode2">Child Node 2</div>
    <div id="childNode3">Child Node 3</div>
</div>

你可以更换#childNode2与#childNode1.

parentNode.replaceChild(childNode1, childNode2)

结果:

<div id="parentNode">
    <div id="childNode1">Child Node 1</div>
    <div id="childNode3">Child Node 3</div>
</div>

13.setAttribute(attrKey, attrValue)

此方法将属性设置为元素。attrKey是属性名称, 属性值是属性的值。

<div id="divNode">Div </div>

设置一个类归因于#divNode的值为面板使用setAttribute:

divNode.setAttribute("class", "panel")

结果将是:

<div id="divNode" class="panel">Div</div>

你可以通过使用空格分隔字符串来为属性设置多个值。

divNode.setAttribute("class", "panel panel-group")

这将设置类具有值的属性面板面板组.

<div id="divNode" class="panel panel-group">Div</div>

14.getAttribute(attrKey)

此方法返回属性的值。

给定一个元素:

<div id="divNode" class="panel panel-group">Div</div>

获得价值id归因于#divNode:

divNode.getAttribute("id")

// divNode

获取的值类属性:

divNode.getAttribute("class")

// "panel panel-group"

15.getAttributeNames()

此方法以数组形式返回元素中的所有属性。

<div id="divNode" class="panel panel-group">Div</div>

要获取div节点中定义的所有属性:

divNode.getAttributeNames()

// Array[ "id", "class" ]

16.cloneNode()

此方法克隆或复制DOM节点。它创建了DOM节点的另一个引用, 因此原始文档不会受到影响。

这通常在DOM API中用于删除DOM节点, 例如appendChild, replaceChild等等。这些API会删除它们所作用的DOM节点, 因此, 如果你不希望删除DOM节点, 请克隆DOM节点, 以便该API在其副本上起作用而不会影响原始副本。

注意:cloneNode不会克隆元素的子节点。它仅复制元素。

例如, 假设你有一个DOM节点要附加到另一个DOM节点。

<div id="div1Node">
    Div 1
</div>

<div id="div2Node">
    Div 2
</div>

如果要附加#div1Nodeto#div2Node不影响#div1Node的位置(即, 不从其位置移除它), 你可以使用cloneNode并将克隆的节点传递给appendChild方法。

div2Node.appendChild(div1Node.cloneNode())

结果:

<div id="div1Node">
    Div 1
</div>

<div id="div2Node">
    Div 2
    <div id="div1Node"></div>
</div>

#div1Node附加到#div2Node但没有其子文本节点。

要克隆带有整个子树的节点, 请传递布尔值truetocloneNode.

div2Node.appendChild(div1Node.cloneNode(true))

这将复制#div1Node及其Text子项并将其附加到#div2Node

<div id="div1Node">
    Div 1
</div>

<div id="div2Node">
    Div 2
    <div id="div1Node">
        Div 1
    </div>
</div>

17.classList

这是具有数组值的DOM节点中的属性。该数组包含类元素中的名称。

<div id="divNode" class="panel panel-group item"></div>

的classListon#divNode将会:

divNode.classList

// DOMTokenList [ "panel", "pane-group", "item" ]

这个DOMTokenList是的子类DOMTokenListPrototype, 其中包含用于操作元素中的类名值的方法。

这会为元素的类名称添加新值。

<div id="divNode" class="panel panel-group item"></div>

要将" item-group"添加到#divNode类属性:

divNode.classList.add("item-group")
<div id="divNode" class="panel panel-group item item-group"></div>

包含

检查类名是否具有指定值。

<div id="divNode" class="panel panel-group item"></div>

检查#divNode的class属性是否具有"面板"。我们这样做:

divNode.classList.contains("panel")

// true

项目(索引)

使用索引样式从列表中检索类值。

例如:

<div id="divNode" class="panel panel-group item"></div>

divNode.classList.item(0)将成为面板

divNode.classList.item(1)将是面板组

divNode.classList.item(2)将成为项目

去掉

这将从属性中删除类值。

例如:

<div id="divNode" class="panel panel-group item"></div>

从面板上卸下面板#divNode的班级名称:

divNode.classList.remove("panel")

结果:

<div id="divNode" class="panel-group item"></div>

更换

这会将列表中的类值替换为新值。

例如:

<div id="divNode" class="panel panel-group item"></div>

要将divNode类名称中的" item"替换为" tab", 我们可以这样做:

divNode.classList.replace("item", "tab")

结果:

<div id="divNode" class="panel panel-group tab"></div>

​​拨动

该方法将指定的值删除或添加到类名。

如果类名称不在元素中, 则将其添加。如果类名称在元素中, 则将其删除。切换。

<div id="divNode" class="panel panel-group item"></div>

我们可以删除/添加"面板"类名称, 如下所示:

示例1

divNode.classList.toggle("panel")

结果:

<div id="divNode" class="panel-group item"></div>

示例2

divNode.classList.toggle("panel")

结果:

<div id="divNode" class="panel panel-group item"></div>

示例3

divNode.classList.toggle("panel")

结果:

<div id="divNode" class="panel-group item"></div>

18.parentNode

这将返回元素父节点的DOM节点实例。

<div id="divNode">
    Parent Node
    <div id="divChildNode"></div>
</div>

要获取父节点#divChildNode:

divChildNode.parentNode

// div ParentNode

19.parentElement

往上看;这与parentNode.

20.innerHTML

这将返回元素的HTML标记。

例如:

<div id="divNode">
    <p>I'm Paragraph</p>
    <div id="childNode1">Chidl Node 1</div>
    <div id="childNode2">Child Node 2</div>
    <div id="childNode3">Child Node 3</div>
</div>

的innerHTMLof#divNode将会:

divNode.innerHTML

// "\n    <p>I'm Paragraph</p>\n    <div id=\"childNode1\">Chidl Node 1</div>\n    <div id=\"childNode2\">Child Node 2</div>\n    <div id=\"childNode3\">Child Node 3</div>\n"

它是子节点的字符串表示形式#divNode元件。

innerHTML用于通过连接两个或多个HTML标记字符串来构建DOM节点。

例如:

<div id="divNode">
    Div 1
<div>

添加HTML标记我是段落todivNode:

divNode.innerHTML += "<p>I'm Paragraph</p>"

DOM结果如下。

<div id="divNode">
    Div 1
    <p>I'm Paragraph</p>
<div>

在它之前divNodeHTML:

divNode.innerHTL = "<p>I'm Paragraph</p>" + divNode.innerHTML

21.innerText

这将返回元素的子节点的文本节点。

例如:

<div id="divNode">
    <p>I'm Paragraph</p>
    <div id="childNode1">Chidl Node 1</div>
    <div id="childNode2">Child Node 2</div>
    <div id="childNode3">Child Node 3</div>
</div>

innerTextondivNode以字符串形式返回包含在其中的所有文本节点#divNode。它将运行到最后一个子树, 并在那里收集所有文本节点。

divNode.innerText

// "I'm Paragraph\n\nChidl Node 1\nChild Node 2\nChild Node 3"

总结

如果你对以上概述的API有任何疑问, 或者对我应该添加, 更正或删除的任何内容有任何建议, 请随时发表评论, 向我发送电子邮件或向我发送DM。

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: