- Vue.js 2 Design Patterns and Best Practices
- Paul Halliday
- 196字
- 2021-06-24 18:33:08
DOM
The DOM is what is used to describe the structure of an HTML or XML page. It creates a tree-like structure that provides us with the ability to do everything from creating, reading, updating, and deleting nodes to traversing the tree and many more features, all within JavaScript. Let's consider the following HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Example</title>
</head>
<body>
<div>
<p>I love JavaScript!</p>
<p>Here's a list of my favourite frameworks:</p>
<ul>
<li>Vue.js</li>
<li>Angular</li>
<li>React</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
We're able to look at the HTML and see that we have one div, two p, one ul, and li tags. The browser parses this HTML and produces the DOM Tree, which at a high level looks similar to this:

We can then interact with the DOM to get access to these elements by TagName using document.getElementsByTagName(), returning a HTML collection. If we wanted to map over these collection objects, we could create an array of these elements using Array.from. The following is an example:
const paragraphs = Array.from(document.getElementsByTagName('p'));
const listItems = Array.from(document.getElementsByTagName('li'));
paragraphs.map(p => console.log(p.innerHTML));
listItems.map(li => console.log(li.innerHTML));
This should then log the innerHTML of each item to the console inside of our array(s), thus showing how we can access items inside of the DOM:

- 網(wǎng)絡(luò)協(xié)議工程
- Twilio Cookbook
- 計(jì)算機(jī)網(wǎng)絡(luò)安全實(shí)訓(xùn)教程(第二版)
- 2018網(wǎng)信發(fā)展報(bào)告
- 圖解手機(jī)元器件維修技巧
- WordPress Web Application Development
- Mastering Dart
- Echo Quick Start Guide
- 語(yǔ)音信號(hào)處理及Blackfin DSP實(shí)現(xiàn)
- 物聯(lián)網(wǎng)工程導(dǎo)論(第3版)
- 深入理解Nginx:模塊開(kāi)發(fā)與架構(gòu)解析
- 5G時(shí)代的大數(shù)據(jù)技術(shù)架構(gòu)和關(guān)鍵技術(shù)詳解
- 圖解物聯(lián)網(wǎng)
- 區(qū)塊鏈技術(shù)與應(yīng)用:打造分布式商業(yè)新生態(tài)
- 物聯(lián)網(wǎng)導(dǎo)論