Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to obtain elements in DOM. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Overview

DOM (Document objectModal): document object model.

DOM: JS objects provided by browsers (browser-specific) specifically for manipulating the content of a web page.

Purpose: let us use Js/TS code to manipulate the content of the page (HTML) and make the page "move", thus realizing Web development.

HTML: hypertext markup language, used to create the structure of web pages.

The relationship between the two: the browser creates a corresponding DOM object according to the HTML content, that is, each HTML tag has a corresponding DOM object

Get element

There are two common methods:

QuerySelector (selector) function: to get a DOM element.

Queryseletor (selectocu) function: get multiple D0M elements at the same time.

Get a DOM element:

Document. QuerySelector (selector) document object: the document object (the entire page), which is the entry object that manipulates the content of the page. Selector parameter: is a css selector (tag, class, id selector, etc.). Purpose: query (get) DOM elements that match selector parameters, but only get the first recommended id selector, such as

Get the tag content with id as title in html and output it in the console: let title = document.querySelector ('# title') console.log (title)

The results are as follows

When you call querySelector () to get the DOM element through the id selector, you get the element type Element. Because there is no way to determine the type of element based on id, the method returns a broad type: the element (Element) type. Both H2 and img are elements. Causes a new problem: the src attribute of the img element cannot be accessed. Because: the Element type contains only the properties and methods common to all elements (for example, the id attribute).

Solution: use type assertions to specify more specific types manually (for example, here they should be more specific than Element types). For example: explanation: we determine that the element of id= "image" is a picture element, so we specify the type as HTML ImageElement.

Let img1 = document.querySelector ('# img1') as HTMLImageElementimg1.src ='. / how does img/4.jpg' know the attributes of an element?

Tip: print the DOM element through console.dir (), and at the end of the attribute, you can see the type of the element.

Let img1 = document.querySelector ('# img1') as HTMLImageElementimg1.src ='. / img/4.jpg'console.dir (img1)

Get multiple DOM elements:

Document. The querySelectorAll (selector) function: gets all the DOM elements that match the selector parameters, and the return value is a list. Recommended: use the class selector. Example: let, list = document. QuerySelectorAll ('.a') explains: get all the elements in the page whose class attribute contains a.

The contents of html are as follows. Welcome to Hainan University.

A disastrous year in 2020

It will be awesome in 2021.

The content in ts is as follows: let list = document.querySelectorAll ('.a') console.log (list) manipulate text content

Read: dom. InnerText setting: dom. InnerText = 'wait until your class is over' Note: you need to specify the specific type of DOM element through type assertions before you can use the innerText attribute. For example

Let title = document.querySelector ('# title') as HTMLParagraphElementconsole.log (title [XSS _ clean])

The additional content is as follows

Let title = document.querySelector ('# title') as HTML Paragraph Elementtitle [XSS _ clean] = title [XSS _ clean] + 'Sunshine Beach Beauty' console.log (title [XSS _ clean]) Index all p-tagged content let list = document.querySelectorAll ('.a') list.forEach (function (item) Index) {let p = item as HTMLParagraphElement p [XSS _ clean] ='['+ index+']'+ p [XSS _ clean]}) this is the end of the article on "how to get elements in DOM" Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.