DOM Action gets the element

overview

DOM: Document object model.

DOM: Is provided by the browser (browser-specific) and is used specifically to manipulate some JS objects for web content.

Purpose: Let's use Js/TS code to manipulate page (HTML) content and "move" the page for Web development.

HTML: Hypertext markup language used to create web page structures.

Relationship between the two: The browser creates the appropriate DOM object based on the HTML content, that is, each HTML label has a corresponding DOM object

Gets the element

There are two common methods:

QuerySelector function: To get a DOM element.

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

Get a DOM element:

document. Q uerySelector (selector) document object: A document object (the entire page) is the entry object that manipulates the contents of the page. S elector parameter: is a css selector (label, class, id selector, etc.). Function: Query (get) the DOM element that matches the selector parameters, but only get to the first recommended id selector, for example

获取html中id为title的标签内容并在控制台输出：




let title = document.querySelector('#title')
console.log(title)

The results are as follows

When you call querySelector() to get a DOM element through the id selector, you get element types that are Element. B ecause the type of the element cannot be determined based on the id, the method returns a broad type: the Element type. B oth h1 and img are elements. C ausing a new problem: The src property of the img element cannot be accessed. Because: The Element type contains only properties and methods common to all elements (e.g. id properties).

Solution: Use type assertions to manually specify more specific types (for example, this should be more specific than the Element type). 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 HTMLImageElement
​
img1.src = './img/4.jpg'

How do I know the properties of an element?

Tip: Print the DOM element through console.dir() and you can see the type of the element at the end of the property.

let img1 = document.querySelector('#img1') as HTMLImageElement
​
img1.src = './img/4.jpg'
​
console.dir(img1)

Get multiple DOM elements:

document . Q uerySelectorAll: Gets all doM elements that match the selector parameters, and the return value is a list. R ecommended: Use the class selector. E xample: let, list , document . QuerySelectorAll ('.a') explains: Get all class properties on the page that contain elements of a.

Here's what's in html

<p id='title'>欢迎来到海南大学</p>
    <p class = ' a'>2020年时多灾多难的一年</p>
    <p class="b a">2021年将牛气冲天</p>
    <img id = 'img1'src="./img/1.jpg" alt="">
    <script src = './index.js'></script>

The contents of ts are as follows

let list = document.querySelectorAll('.a')
​
console.log(list)

The results are as follows

Manipulate the text content

Read: dom. i nnerText settings: dom. I nnerText note: You need to specify the specific type of the DOM element through type assertions before you can use the innerText property. For example

let title = document.querySelector('#title') as HTMLParagraphElement
console.log(title.innerHTML)

The appends are as follows

let title = document.querySelector('#title') as HTMLParagraphElement
title.innerHTML = title.innerHTML + '  阳光沙滩美女'
console.log(title.innerHTML)

Index the contents of all p-labels

let list = document.querySelectorAll('.a') 
​
list.forEach(function (item,index) {
    let p = item as HTMLParagraphElement
    p.innerHTML = '['+index+']'+p.innerHTML
})

The output is as follows: