HTML DOM方法

querySelector() (querySelector())

The Document method querySelector() returns the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Document方法querySelector()返回文档中与指定选择器或选择器组匹配的first元素。如果未找到匹配项，则返回null。

HTML内容： (HTML content:)

<div id="id-example"></div>
<div class="class-example"></div>
<a>element-example</a>

JavaScript内容： (JavaScript content:)

document.querySelector("#id-example"); // Returns the element with id "id-example"
document.querySelector(".class-example"); // Returns the element with class "class-example"
document.querySelector("a"); // Returns the "a" element

Note querySelector() returns the first matching element, to return all the matches, use the querySelectorAll() method instead.

注意querySelector()返回第一个匹配的元素，要返回所有匹配项，请改用querySelectorAll()方法。

<div id="example">First</div>
<div id="example">Second</div>

document.querySelector("#example"); // Returns only the element containing 'First'

innerHTML (innerHTML )

The innerHTML prop return the HTML content inside a selected element and also let you define a new HTML content.

innerHTML属性返回选定元素内HTML内容，还允许您定义新HTML内容。

获取元素内容 (Get element content)

<div id="demo"><p>Demo</p>
</div>

var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>

设置元素内容 (Set element content)

<div id="demo"></div>

var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";

The HTML now will be like

现在HTML就像

<div id="demo"><div>Demo</div>
</div>

安全注意事项 (Security considerations)

The value that’s set to innerHTML should come from trusted sources, since Javascript will put anything inside that element and it will be run as plain HTML.

设置为innerHTML的值应该来自受信任的来源，因为Javascript会将任何内容放入该元素中，并且它将作为纯HTML运行。

Example:

例：

Setting a ”<script>alert();</script>” value will cause the Javascript “alert()” function to be fired:

设置“ <script>alert();</script> ”值将触发Javascript“ alert()”函数：

var element = document.getElementById("demo");element.innerHTML = "<script>alert();</script>";

This type of attack is called Cross Site Scripting, or XSS for short.

这种攻击称为“ 跨站点脚本”或“ XSS” 。

This is one of the most common ways of committing an XSS attack. If you want to learn a little bit more and learn to defend against it, check out this resource.

这是实施XSS攻击的最常见方法之一。如果您想学习更多并学会防御，请查看此资源。

getElementById() (getElementById())

The getElementById() method returns the element that has the id attribute with the specified value. It takes one argument, which is a case-sensitive string of the id for the element you want.

getElementById()方法返回具有具有指定值的id属性的元素。它带有一个参数，它是所需元素的ID的区分大小写的字符串。

This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element in your document. Here’s a simple example of the syntax:

此方法是HTML DOM中最常见的方法之一，几乎在您每次要操作或从文档中的元素获取信息时都使用该方法。这是语法的一个简单示例：

HTML content:

HTML内容：

<div id="demo"></div>

JavaScript content:

JavaScript内容：

document.getElementById("demo"); // Returns the element with id "demo"

If you have more than one element with the same value of id (bad practice!), getElementById will return the first element found:

如果您有多个具有相同id值的元素(不好的做法！)， getElementById将返回找到的第一个元素：

<div id="demo">First</div>
<div id="demo">Second</div>

document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

更多信息： (More Information:)

document.getElementById()

替代解决方案： (Alternative solutions:)

A commonly-used alternative to document.getElementById is using a jQuery selector which you read about more here.

常用的document.getElementById替代方法是使用jQuery选择器，您可以在这里内容。

有关HTML DOM的更多信息 (More info about the HTML DOM)

With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

使用HTML DOM，JavaScript可以访问和更改HTML文档的所有元素。

When a web page is loaded, the browser creates a Document Object Model of the page.

当网页加载时，浏览器会创建一个d ocumentØbject 中号奥德尔页面。

The HTML DOM model is constructed as a tree of Objects:

HTML DOM模型被构造为对象树：

Each element in the DOM is also called a node.

DOM中的每个元素也称为节点。

<html>
<head><title> My title </title>
</head>
<body><a href="#">My Link</a><h1> My header </h1>
</body>
</html>

The DOM for the above HTML is as follows:

以上HTML的DOM如下：

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

通过对象模型，JavaScript获得了创建动态HTML所需的全部功能：

JavaScript can change all the HTML elements in the page
JavaScript可以更改页面中的所有HTML元素
JavaScript can change all the HTML attributes in the page
JavaScript可以更改页面中的所有HTML属性
JavaScript can change all the CSS styles in the page
JavaScript可以更改页面中的所有CSS样式
JavaScript can remove existing HTML elements and attributes
JavaScript可以删除现有HTML元素和属性
JavaScript can add new HTML elements and attributes
JavaScript可以添加新HTML元素和属性
JavaScript can react to all existing HTML events in the page
JavaScript可以对页面中所有现有HTML事件做出React
JavaScript can create new HTML events in the page
JavaScript可以在页面中创建新HTML事件