当前位置：网站首页>JS component

JS component

2022-06-25 14:17:00 【Rabbit^-^】

form ：

ECMAscript Interpreter No compatibility issues ES6 To ES10 There will be compatibility issues

BOM Browser object model Almost all incompatible

DOM Document object model Partial compatibility DOM1 DOM2 DOM3

BOM

Window Form object

attribute

  1. innerheight Returns the height of the document display area of the window .( Width and height of visible area )
  2. innerwidth Returns the width of the document display area of the window .
  3. outerheight Returns the external height of the window . ( Without menu bar and console , Overall width and height )
  4. outerwidth Returns the external width of the window .
  5. pageXOffset Sets or returns the X Location .
  6. pageYOffset Sets or returns the Y Location .
  7. self Returns a reference to the current window .  
  8. screenLeft The upper left corner is on the screen x coordinate （IE）
  9. screenTop The upper left corner is on the screen y coordinate （IE）
  10. screenX The upper left corner is on the screen x coordinate
  11. screenY The upper left corner is on the screen y coordinate

Method

  1. alert() Display a warning box with a message and a confirm button .
  2. clearInterval() Cancel from setInterval() Set up timeout.  
  3. clearTimeout() Cancel from setTimeout() Method set timeout.  
  4. close() Close the browser window .
  5. confirm() Displays a dialog box with a message and a confirm and Cancel buttons .  
  6. moveBy() Moves the window to the specified pixel relative to its current coordinates .  
  7. moveTo() Move the upper left corner of the window to a specified coordinate .  
  8. open() Open a new browser window or find a named window .  
  9. print() Print the contents of the current window .  
  10. prompt() Displays a dialog box that prompts for user input .  
  11. resizeBy() Resize the window to the specified pixel .  
  12. resizeTo() Resize the window to the specified width and height .  
  13. scrollBy() Scrolls content according to the specified pixel value .  
  14. scrollTo() Scroll content to specified coordinates .  
  15. setInterval() According to the specified period （ In milliseconds ） To call a function or evaluate an expression .  
  16. setTimeout() Call the function or computing expression after the specified millisecond count. .

open Method parameters

open( Address , name , style ”width=200,height=200”)

attribute

  1. width Width
  2. height Height
  3. Top The offset above
  4. left Left offset
  5. location Show address bar yes/no
  6. menubal Show menu bar or not yes/no
  7. resizable Whether you can drag to change the size yes/no
  8. srcollbar Show scroll bar or not yes/no

Navigator Contains information for the client browser .

Screen Contains information for the client display .

Location Address bar object

attribute

  1. hash Set or return from well number (#) At the beginning URL（ anchor ）.  
  2. host Set or return the host name and current URL Port number .  
  3. hostname Set or return to current URL The host name .  
  4. href Set or return to full URL.  
  5. pathname Set or return to current URL The path part of .  
  6. port Set or return to current URL Port number .  
  7. protocol Set or return to current URL The agreement .  
  8. search Set or return from question mark (?) At the beginning URL（ Inquiry section ）.

History Historical record object

  1. back() load history The previous one in the list URL.  
  2. forward() load history Next... In the list URL.  
  3. go() load history A specific page in the list .

DOM object

  1. body Provide right <body> Direct access to elements .        
  2. cookie Set or return all... Related to the current document cookie.  
  3. lastModified Returns the date and time when the document was last modified .
  4. title Returns the title of the current document .  
  5. URL Returns the URL.
  6. getElementById() Return to have specified id  Reference to the first object of .  
  7. getElementsByName() Return with Specify a name Object collection for .  ( Array )
  8. getElementsByTagName() Return with Specify label name Object collection for . ( Array ) 
  9. getElementsByClassName() Return with Appoint class name Object collection for ( compatible IE8 above )( Array )
  10. write() Write... To the document HTML expression or JavaScript Code .  
  11. writeln() Equate to write() Method , The difference is to write a new line character after each expression .

label . attribute Set or return the properties under the tag ( Look at the properties )

label .style.fontSize=”20px” Set or return style

label .innerHTML=”” Set or return text or labels

for example ：  

var p=document.getElementsByTagName("p")

        p[0].innerHTML="<a href ='#'> Hyperlinks </a>"

        var input=document.getElementsByName("user")

        input[0].value=" The text box "

Forms

Form name . The text box name Get form tags

Form name . The text box name.value Modify the value with value

Form name .submit() Execute commit event

event

onclick Mouse click       onchange Choose Events

onmouseover() Move the mouse closer   onmouseout() Mouse removal

onblur() Lose focus   onfocus() Focus of attention

onload() load

Event operation mode

The way 1

var btn=document.getElementById("btn")

btn.οnclick=function(){

// Execute the statement to be operated

}

The way 2

<button οnclick="fun()"> Click on </button>

function fun(){

            alert(" Button operation ")

        }

node type

nodeType Get the node type

1 Label type 2 attribute 3 Text 8 notes 9 object

nodeName The name of the node #text Text node

tagName The element name ( Excluding text ) Determine whether it is a label

appendChild() Add children to the tail   The page is added or cut

removeChild() Delete child element //div[0].removeChild(p1)

CloneNode(true/false) Copy elements

replaceChild( new , used ) Replacement elements ( Contains child elements )

insertBefore( new , used ) Insert child element ( Will not cover , There will be a new )

Document.createElement() Create a label

Document.createTextNode() Create text

getAttribute() Get attributes

removeAttribute() Delete attribute

setAttribute() Modify properties

 var a=document.getElementsByTagName("a")

        console.log(a[0].href) new

        console.log(a[0].getAttribute("href")) used

picture

var img=new Image()

img.src=””

document.body.appendChild=img

form

cells[] Returns a collection of all cells in a table

rows[] Returns the set of all rows in the table

insertRow() Add a row to the table

deleteRow() Delete a row in the table

rowIndex() Returns the position of the row in the table

insertCell() Add a cell

deleteCell Delete a cell

colSpan() Cross column

rowSpan() enjambment

tab.rows[2].deleteCell(2)

tab.rows[2].cells[1].colSpan=2

DOM Expand

Tag filtering

1.firstchild Get the first child ( Contains text nodes )

firstElementchild Get the first child

2.lastchild Get the last child ( Contains text nodes )

lastElementchild Get the last child

3.chaildNodes Get a collection of all child nodes ( Contains text nodes )

children Get a collection of all child nodes

4.previousSibling Get the last brother ( Contains text nodes )

previousElementSibling Get the last brother

5.nextSibling Get the next brother ( Contains text nodes )

nextElementSibling Get the next brother

6.parentNode() Get the parent node

Get elements

querySelector() adopt Selectors Get a tag

querySelectorAll() adopt Selectors Get the tag set

MatchesSelector() Determine whether a selector belongs to a tag Only judge class

If the compatibility is not good, you can write prefixes , for example ：webkitMatchesSelector()

li[0].webkitMatchesSelector(".txt")

class operation

classList object

add() add to class attribute

remove() Delete class attribute

contains() Judge class Whether there is

toggle() Add delete switch class

 

Custom properties

Html5 The syntax can customize the attribute content for the tag , But the attribute definition must be in the form of “data-” start , Can pass js Call custom attribute values

for example :

<p data-aa=”23”></p>

Insert text and labels

innerHTML() Add a label or text inside

outerHTML() Add a label or text

innerText() Add text

outerText() Add text outside

innerAdiaceHTML( Location , Elements ) Insert the specified element

beforebegin Add a brother before

afterbegin Add a brother before

beforeend Add children after

afterend Add children after

Document mode

<meta http-equiv="X-UA-Compatible" content="IE=edge">

edge  Render in the latest document mode

EmulateIE9 If there is a document type declaration , Then use IE9 Otherwise, use IE5

EmulateIE8 If there is a document type declaration , Then use IE8 Otherwise, use IE5

EmulateIE7 If there is a document type declaration , Then use IE7 Otherwise, use IE5

9： Compulsory use IE9 Rendering 8： Compulsory use IE8 Rendering

7： Compulsory use IE7 Rendering 5： Compulsory use IE5 Rendering

DOM2 and DOM3

style

object .style.color=”” Set or return style ( inline )

object .currentStyle[“color”] Get style (IE)

getComputedStyle( object , Whatever )[“color”] Get style Google Firefox

Element size and offset

document.body.clientWidth Sets or returns the width of the scrollbar

document.body.clientHeight Set or return the height with scroll bar

document.documentElement.clientWidth Sets or returns the width with visualization +”px”

document.documentElement.clientHeight Sets or returns the height with visualization +”px”

Can only get but not modify ：

offsetWidth The width of the element label ( Including borders and margins )

offsetHeight The height of the element label ( Including borders and margins )

offsetTop The offset above the label

offsetLeft The offset of the left side of the label

offsetParent Returns the parent object of the tag

Scroll bar position

srcollWidth Total width of elements with scroll bars

srcollHeight The total height of the elements with scroll bars

srcollTop The offset above the scroll bar

srcollLeft The offset to the left of the scroll bar

Compatibility

document.compatMode Determine whether the browser is in hybrid mode

BackCompat Hybrid mode Css1Compat The standard model

原网站

版权声明
本文为[Rabbit^-^]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202200523193452.html

边栏推荐

猜你喜欢

随机推荐