JavaScript composes BOM and DOM

1. The composition of JavaScript

ECMAScript : javascript standard browser ES6

2. BOM: The browser object model provides an object that is independent of the content and interacts with the browser window. It is mainly used to manage the communication between the window and the window. Therefore, its core object is the window, and the BOM is composed of a series of is composed of related objects, and each object provides many methods and properties

    window object: It is the global global object specified by ECMAscript, and it is an interface for JavaScript to access the browser window

                            System dialog alert()

                                                 confirm() 

                                                 prompt()

                            move window, resize window

                            Navigate and open windows

                            Timing related functions

All global variables are window properties

	<script type="text/javascript">
		//All global variables are window properties
		var str="Zhang San";
		console.log(str);
		console.log(window.str);
		//This verifies that only global variables can be called with window, and properties in local cannot be called with window
		function test(){
			var age = 18;
			console.log(age);
		}
// console.log(age);//Error
//		console.log(window.age);//undefined
		test();
	</script>

All global functions are window methods

	<script type="text/javascript">
		//All global functions are window methods
		//define a function
		function func(){
			console.log("111");
		}
		func();//output 111
		window.func();//Output 111
	</script>

There will be a problem here. We can call it directly. Why do we need to use the window call? When we design modular, multi-page calls, we need to use this.

document object: Each HTML document loaded into the browser will become a document object, which can be accessed on all HTML pages. Commonly used are additions, deletions, changes and searches

The document object is part of the window object and can be accessed through the window.document property

	<script type="text/javascript">
		console.log(window.document);	
	</script>

Common object methods of the document object:

write(): Write HTML, expressions or js code to the document

writeln(): Write HTML, expressions or js code to the document, writing a newline after each expression

open(): open a stream, the output stream of the write() method

close(): closes the output stream opened with open()

getElementById() getElementsByName()

3. Events

js is a language with event-driven as the core

The Three Elements of Events: Event Sources, Events, and Event Drivers

                        Get event sources, bind events, and write event drivers

Event source: equivalent to a light switch, mainly refers to DOM objects in js, such as: div, span, button and other tags

Events: press, common events in js press, mouse over, mouse move, keyboard press

Event-driven: the light is on, common additions and deletions in js

Get event source: get div etc through document.getElementsByName("name");

Binding event: document.getElementsByName("name");
box.onclick=function(){
//program
}

DOM : Document Object Model