当前位置：网站首页>Functions in JS and the use of DOM to obtain elements and event attributes

Functions in JS and the use of DOM to obtain elements and event attributes

2022-07-27 18:47:00 【Rise from the road】

js The function in and DOM Get the use of element and event attributes

List of articles

One . function

A function is an event driven or reusable block of code that executes when it is called .

1. There are four cases of function :

With parameter and return value
Return value with parameter or not
No parameter return value
No parameter no return value

Examples with parameters and return values :

<script> function  Function name ( Parameters 1, Parameters 2...){
        Code ; return  Return value ; } </script>

If the function has no parameters or return value , Don't write accordingly .

2. Anonymous functions :

<script> var  Variable =function ( Parameters 1, Parameters 2...){
        Code ; return  Return value ; } </script>

Call anonymous functions :

<script>  Variable (); </script>

Two .DOM Get elements

1.document.getElementById()

<script> function getId(){
       var Id=document.getElementById('id'); } </script>

Get a set of elements according to the tag name —> Is an array

2.document.getElementsByTagName()

<script> function getTag(){
       var tag=document.getElementsByTagName('p'); } </script>

Get a set of elements according to the class selector —> Is an array

3.document.getElementsByClassName()

<script> function getClass(){
       var class=document.getElementsByClassName('class'); } </script>

according to class Name to get a set of elements —>form On the form —> Is an array

4.document.getElementsByName()

<script> function getName(){
       var name=document.getElementsByName('Name'); } </script>

according to name Name to get a set of elements —>form On the form —> Is an array

3、 ... and .DOM event ( part )

1.onclick Click event
2.onload Document loading completed
3.onmouseout Mouse migration
4.onmouseover Mouse removal
5.onchange Content changes
6.onblur Element losing focus
7.onselect The text is selected
8.onsubmit form Events that occur when the form is submitted
…
Use of events :
document.write() Output information on the page , But he will overwrite the previous information , Use with caution 

<script> function  event 1(){
       alert(' This is an event 1'); } </script>
<body>
	<input type='text' value=' Content ' onselect=' event 1()'/>// Use what event to write what event 
</body>

If you call a function , And the function returns false, then onsubmit() Also returned false, It will not be submitted at this time . Unless we find a way to make the function return true, Before you can submit the form

Be careful ： The browser parses from top to bottom , If you will <script> Written in <head> In the label , obtain <body> The elements in ,
for example ：x.innerHTML Can't get
Because get x.innerHTML When , It has not been resolved to <body> The content of , So it's not available .
solve ：
1. take <script> Put it behind the content you want to get
2. Add an event to the label , Binding function
3. stay <head> Write in <script>,<script> Write function in , Add one after the content you want to get <script>
stay <script> Calling function in

Four . attribute

1.innerHTML Closed label （ A couple of labels ） The elements of 

<script> function getId(){
       var Id=document.getElementById('id'); Id.innerHTML=" Content ";//innerHTML You can get content or change content  } </script>

2.value Get the form value Value
3.src Get photo
4.href Hyperlink address
5. Modify the style
Inline style :
Elements obtained .style. attribute =‘ value ’
This method is changed to inline style
If the modified style attribute is a word , Use it directly
If there are more than two words , The middle line needs to be removed , Start with the second word , title case , Conform to the naming method of small humps .
Internal style :
Elements obtained .className=‘ value ’
It is equivalent to adding a class selector to the label
If you want this style to work , You need to write the style in advance
6.this: Refers to the current object

5、 ... and . Summary

This chapter outlines JavaScript The use of functions in and DOM Get the use of elements and some events in . There is also the use of some attributes , The content is more , But they are hard knowledge points that are not easy to change , It's all dry .
Where are the deficiencies or better suggestions , Welcome to make complaints about Tucao , There are little friends who don't understand , You can write to me , I will answer them one by one , Thank you for your approval , Thank you for your support !

原网站

版权声明
本文为[Rise from the road]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271617060303.html

边栏推荐

猜你喜欢

随机推荐