本文共 4597 字，大约阅读时间需要 15 分钟。
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。
element-example
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()方法。
FirstSecond
document.querySelector("#example"); // Returns only the element containing 'First' The innerHTML prop return the HTML content inside a selected element and also let you define a new HTML content.
innerHTML属性返回选定元素内HTML内容，还允许您定义新HTML内容。
Demo
var element = document.getElementById("demo");console.log(element.innerHTML) //logs Demo
var element = document.getElementById("demo");element.innerHTML = " Demo "; The HTML now will be like
现在HTML就像
Demo
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 = ""; This type of attack is called .
这种攻击称为“ 。
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, .
这是实施XSS攻击的最常见方法之一。 如果您想学习更多并学会防御， 。
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内容：
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将返回找到的第一个元素：
FirstSecond
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'
A commonly-used alternative to document.getElementById is using a jQuery selector which you read about more .
常用的document.getElementById替代方法是使用jQuery选择器，您可以在阅读更多内容。
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中的每个元素也称为节点。
My title My LinkMy header
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所需的全部功能：
翻译自:
转载地址：http://dlrwd.baihongyu.com/