Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what the concept of JavaScript WebAPI is, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this JavaScript WebAPI concept article. Let's take a look at it.

1. WebAPI background knowledge 1.1 what is WebAPI

JS is divided into three major parts:

ECMAScript: basic grammar section

DOM API: manipulate the page structure

BOM API: operating browser

WebAPI contains DOM + BOM.

1.2 DOM basic Concepts what is DOM

DOM is called Document Object Model.

The W3C standard provides us with a series of functions that allow us to operate:

Web page content

Web page structure

Web page style

DOM tree

The structure of a page is a tree structure, called a DOM tree.

Key concepts:

Document: a page is a document, represented by document.

Elements: all tags on the page are called elements. It is represented by element.

Node: all content in a web page can be called a node (tag node, comment node, text node, attribute node, etc.). It is represented by node.

two。 Get element 2.1 querySelector

Using querySelector, we can completely reuse the CSS selector knowledge we have learned before, and obtain the element object in a faster and more accurate way.

Syntax format:

Let element = document.querySelector (selectirs)

Selectors fill in one or more selectors

Examples of use:

Abc

Def

Let one = document.querySelector ('.one'); console.log (one); let two = document.querySelector ('# two'); console.log (two); let three = document.querySelector ('input'); console.log (three)

Run screenshot

2.2 querySelectorAll

If you need a list of all elements that match the specified selector, you should use querySelectorAll ()

Examples of use:

one hundred and twenty three

four hundred and fifty six

Let ps = document.querySelectorAll ('p'); console.log (ps)

Run screenshot

3. Operation element 3. 1 get / modify element content 1. InnerText

The Element.innerText attribute represents the "rendered" text content of a node and its descendants

Note: the html tag is not recognized. Is non-standard (initiated by IE). The result of reading does not retain line breaks and spaces in the html source code.

Examples of use:

Hello world

Hello world

Let p = document.querySelector ('.two'); console.log (p); p.innerText = 'world hello'

Run the screenshot:

The html structure inside p can not be obtained through innerText, only text content can be obtained.

2. InnerHTML

Element [XSS _ clean] property sets or gets the descendants of elements represented by HTML syntax

Note:

Identify the html tag. W 3 C standard. The result of reading preserves line breaks and spaces in the html source code

Code example:

Hello world

Hello world

Let p = document.querySelector ('.two'); console.log (p); p [XSS _ clean] = 'world hello'

Run the screenshot:

InnerHTML can not only get the html structure of the page, but also modify the structure. And get the reserved spaces and line breaks of the content.

3.2 get / modify element attributes

Note: through element. Property to get the property

Code example:

Let img = document.querySelector ('img'); img.onclick = function () {if (img.title.lastIndexOf ("male")! =-1) {img.src =' female.png'; img.title = 'female';} else {img.src = 'male.png'; img.title =' male' }}

Running result:

3.3 get / modify form element attribute code example 1: playback paused conversion. Let input = document.querySelector ('input'); input.onclick = function () {if (input.value = =' playback') {input.value = 'pause';} else {input.value = 'playback';}}

Run the screenshot:

Code example 2: count let one = document.querySelector ('# one'); let add = document.querySelector ('# add'); add.onclick = function () {one.value++;}

Code example 3: select all / deselect all Button choose your favorite game Arena of Valor Game for Peace Happy Xiao Le my world all choose let games = document.querySelectorAll ('.game'); let all = document.querySelector ('.all'); all.onclick = function () {for (let I = 0; I)

< games.length; i++) { games[i].checked = all.checked; } } for (let i = 0; i < games.length; i++) { games[i].onclick = function() { all.checked = allChecked(); } } function allChecked() { for (let i = 0; i < games.length; i++) { if(!games[i].checked){ return false; } } return true; } 运行截图 3.4 获取/修改样式属性 CSS 中指定给元素的属性, 都可以通过 JS 来修改 style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的. 例如: font-size =>

FontSize, background-color = > backgroundColor, etc.

1. Inline style operation element.style. [attribute name] = [attribute value]; element.style.cssText = [attribute name + attribute value]; Code example: font size becomes larger. Hello.

Let p = document.querySelector ('p'); p.onclick = function () {let fontSize = parseInt (p.style.fontSize); fontSize + = 10; p.style.fontSize = fontSize + "px"; / / pay attention to units with units}

Run the screenshot:

two。 Class name style operation element.className = [CSS class name]; code example: background color change html,body {height: 100%; width: 100%;} p {height: 100%; width: 100%;} .black {background-color:black; color: gray } .gray {background-color: gray; color: black;} Hello!

Let p = document.querySelector ('p'); p.onclick = function () {if (p.className.indexOf ("black")! =-1) {p.className = 'gray';} else {p.className =' black';}}

Run the screenshot:

4. Operation Node 4.1 New Node

There are two steps:

Create an element node

① createElement creates element nodes.

② createTextNode creates a text node

③ createComment creates a comment node

④ createAttribute creates attribute nodes

Insert a node into the dom tree

① uses appendChild to insert a node after the last child of a specified node

② uses insertBefore to insert a node before a specified node

Code example:

Let p = document.createElement ('p'); p.id = 'myp'; p.className =' one'; p [XSS _ clean] = 'hehe'; let test = document.querySelector (' .test'); test.appendChild (p)

Run the screenshot:

Code example: when a node is inserted twice, it is equivalent to moving.

one

two

three

four

Let child = document.createElement ('p'); child [XSS _ clean] = '100parents; let parent = document.querySelector (' .parent'); / / there are four elements, but element 0 is missing, insert an element parent.insertBefore (child,parent.children [0]) / / insert before element 2, element 1 is 1, not child,2 element is 2. Parent.insertBefore (child,parent.children [2])

Running result:

4.2 Delete a node

Delete child nodes using removeChild

OldChild = element.removeChild (child)

Note: if child is not a child of element, an exception will be thrown

Code example: 1

two

three

Let parent = document.querySelector ('.parent'); let childs = document.querySelectorAll ('.child'); parent.removeChild (childs [1])

Running result:

5. Realize several cases 5.1 guess numbers and guess numbers

Please enter the number you want to guess:

Number of guesses: 0

Results:

Let guessNum = document.querySelector ('.guessNum'); let press = document.querySelector ('.press'); let count = document.querySelector ('.count'); let result = document.querySelector ('.result'); let countCount = 0; let guessResult = Math.floor (Math.random () * 100) + 1; press.onclick = function () {countCount++; count [XSS _ clean] = countCount GuessNumber = parseInt (guessNum.value); if (guessNumber = = guessResult) {result [XSS _ clean] = 'right'; result.style = 'color: red';} else if (guessNumber < guessResult) {result [XSS _ clean] =' guess small'; result.style = 'color: blue'' } else {result [XSS _ clean] = 'guess big'; result.style = 'color: orange';}} let again = document.querySelector (' .again'); again.onclick = function () {guessResult = Math.floor (Math.random () * 100) + 1; countCount = 0 Count [XSS _ clean] = 0; guessNum.value =''; result [XSS _ clean] ='';}

Run the screenshot:

5.2 confession wall

After typing, click submit, and the information will be displayed in the table.

Who:

To whom:

What do you say:

/ * remove the default browser style * / * {margin: 0; padding: 0;} / * set the total width * / .parent {width: 400px; margin: 0 auto;} / * Investment-related confession wall style * / # wall {font-size: 30px Font-weight: 700; text-align: center; margin: 5px;} / * set prompt message style * / # remind {font-size:13px; text-align: center; color:gray; margin: 5px } / * set flexible layout * / .one {display: flex; justify-content: center; align-items: center; height: 40px;} / * set text content * / .two {width: 100px; line-height: 40px } / * set input box * / .one .text {width: 200px; height: 20px;} / * Settings of the submit button * / .one .press {width: 304px; height: 40px; color:white; background-color: orange Border-radius: 5px; border: none;} / * set the color to change when the mouse clicks * / .one .press: active {background-color: red;} / * Settings for submission and content * / .elem {text-align: center } / / get the input box element let texts = document.querySelectorAll ('.text'); / / get the submit button element let press = document.querySelector ('.press'); / / set the click event press.onclick = function () {let user1 = texts [0] .value Let user2= texts [1] .value; let message= texts [2] .value; / / if one is empty, the submission is unsuccessful if (user1=='' | | user2=='' | | message=='') {return } / / here is not empty, create a new node let elem = document.createElement ('p'); elem.className = 'elem'; eleme [XSS _ clean] = user1 +' say to'+ user2 +':'+ message; / / insert a new node let parent = document.querySelector ('.parent') Parent.appendChild (elem); / / leave the input box empty after submission. For (let I = 0; I < 3; iTunes +) {textbooks [I] .value =';}}

Run the screenshot:

5.3 to-do list

Unfinished

Done

/ * remove browser default style * / * {margin: 0; padding: 0;} / * set width * / .parent {width: 840px; margin: 0 auto;} / * set input box and new style * / .one {height: 50px Padding: 20px;} / * set input box style * / .one .text {height: 50px; width: 600px;} / * set submission box style * / .one. Submit {background-color: orange; color: white; height: 50px Width: 196px; border: none;} / * set the background of the click * / .one .submit: active {background-color: red;} / * set completed and unfinished styles * / .two {width: 800px; height: 800px; display: flex Margin: 0 auto;} / * set incomplete and completed font styles * / .two h4 {height: 50px; text-align: center; line-height: 50px; background-color: black; color: white } / * set the style on the unfinished left * / .left {width: 50%; height: 100%;} / * set the style on the completed right * / .right {width: 50%; height: 100% } / * style of new task * / .row {height: 50px; display: flex; align-items: center;} / * style of font of new task * / .row span {width: 340px } / * Delete button style for the new task * / .row button {width: 40px; height: 40px;} / / first get the new button element let submit = document.querySelector ('.submit') / / set the mouse click event submit.onclick = function () {/ / get the input box element let text = document.querySelector ('.text'); / / determine whether the input box content is empty if (text.value = =') return / / New to-do let row = document.createElement ('p'); row.className='row'; let checkBox = document.createElement ('input'); checkBox.type='checkbox'; let thing = document.createElement (' span'); Ting [XSS _ clean] = text.value; let del = document.createElement ('button') Del [XSS _ clean] = 'delete'; row.appendChild (checkBox); row.appendChild (thing); row.appendChild (del); / / get the left element let left = delete ('.left'); left.appendChild (row) / / leave text.value='' empty after adding nodes / / set mouse click event checkBox.onclick = function () {/ / move completed if selected / / move to incomplete if (checkBox.checked) {let target = document.querySelector ('.right') Target.appendChild (row);} else {let target = document.q uerySelector ('.left'); target.appendChild (row) }} / / set the mouse click event of the delete button del.onclick = function () {/ / use parentNode to get the parent node let parent = row [XSS _ clean]; / / delete the node parent.removeChild (row) }}

Run the screenshot:

This is the end of the article on "what is the concept of JavaScript WebAPI?" Thank you for reading! I believe you all have a certain understanding of "what is the concept of JavaScript WebAPI". If you want to learn more, you are welcome to follow the industry information channel.

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.