Understand JavaScript WebAPI in one article

This article brings you relevant knowledge aboutjavascript, which mainly introduces related issues about JavaScript WebAPI, including WebAPI background knowledge, obtaining elements, operating elements, operating nodes and some Let’s take a look at the case sharing below. I hope it will be helpful to everyone.

[Related recommendations:javascript video tutorial,web front-end】

1. WebAPI background knowledge

1.1 What is WebAPI

JS is divided into three major parts:

• ECMAScript: Basic syntax part
• DOM API: Manipulate the page structure
• BOM API: Manipulate the browser

WebAPIincludesDOM BOM.

1.2 Basic concepts of DOM

What is DOM

DOMstands forDocument Object Model.

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

1. Webpage content
2. Webpage structure
3. Web page style

DOM tree

The structure of a page is a tree structure, calledDOM tree.

Important concepts:

• ##Document: A page is adocument, represented bydocument.
• Element: All tags in the page are calledelements. Useelementto represent.
• Node: All content in the web page can be callednode(label node, comment node, text node, attribute node, etc.). Usenodeto represent.

querySelectorcan completely reuse the CSS selector knowledge learned previously to achieve a faster and more accurate way to obtain Element object

Syntax format:

let element = document.querySelector(selectirs);

• selectorsFill in one or more selectors

Usage example:

 abc 
 
 def 
 
 

Run screenshot
##2.2 querySelectorAll

If you need to select with the specified A list of all elements matched by the filter, you should use

123
 
456
 

3. Manipulate elements

3.1 Get/modify element content

1. innerText

Attribute represents the "rendered" text content of a node and its descendants

Does not recognize html tags. Is non-standard (initiated by IE). Read The result does not retain line breaks and spaces in the html source code.

hello world
 
hello world
 

:Passed

Unable to getto thepinternalhtmlstructure, only the text content can be obtained.
2. innerHTML

The property sets or gets the descendants of the element represented by HTML syntaxNote
:

Identification
• html tag. W3C standard. The read result retains line breaks and spaces in the html source code

hello world
 
hello world
 

Not only can you get thehtmlstructure of the page, but you can also modify the structure. And the content you get is retained. Spaces and line breaks
3.2 Get/modify element attributes

Get attributes# throughelement.properties##Code example:

##3.3 Get/modify form element attributes
Code example 1: Play pause transition.

代码示例2: 计数

选择你喜欢玩的游戏
 王者荣耀
 和平精英
 开心消消乐
 我的世界
 全选 

element.style.[属性名] = [属性值];element.style.cssText = [属性名+属性值];

你好
 

element.className = [CSS 类名];

 
 你好! 
 

 
1
 
2
 
3
 
4

运行结果:

4.2 删除节点

使用removeChild删除子节点

oldChild = element.removeChild(child);

注: 如果 child 不是 element 的子节点,会抛异常

代码示例:

 
1
 
2
 
3
 

运行结果:

5. 实现几个案例

5.1 猜数字

nbsp;html>     
 
 
 请输入要猜的数字:   
 
 已经猜的次数: 0 
 
 结果:  
 

运行截图:

5.2 表白墙

nbsp;html>     
 
表白墙
 
输入后点击提交,会将信息显示在表格中
 
谁:
 
对谁:
 
说什么:
 
  

运行截图:

5.3 待办事项

nbsp;html>     
 
  
 
 
 
未完成
 
 
已完成
  

运行截图:

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of Understand JavaScript WebAPI in one article. For more information, please follow other related articles on the PHP Chinese website!