JavaScript: On operating BOM and DOM

Browser instructions

Due to the emergence of JavaScript is to be able to run in a browser, the browser is JavaScript developers must naturally be of concern.

Current mainstream browsers so few points:

IE 6 ~ 11: the country with the most IE browser has always been to support the W3C standard deviation. From the beginning IE10 support ES6 standards;
Chrome: Google produced Webkit-based browser, built a very powerful JavaScript engine --V8. Because once installed on Chrome keep from upgrades, so do not ignore the version, the latest version already supports ES6;
Safari: Apple's Mac system comes with a Webkit-based browser from the OS X 10.7 Lion comes with version 6.1 began to support ES6, the latest OS X 10.11 El Capitan comes with Safari version 9.x, already support ES6;
Firefox: Mozilla's Gecko core and develop their own JavaScript engine OdinMonkey. Early press releases Firefox, Chrome was finally smart enough to learn the practice of self-upgrade, always kept up to date;
On iOS and Android mobile devices currently two camps are mainly used Apple's Safari and Google's Chrome, due both Webkit core, the results of First HTML5 universal access on the phone (Microsoft Desktop is definitely a drag), on JavaScript standard support is also very good, the latest versions are supported ES6.

Other browsers such as Opera, the market share is too small to be automatically ignored.

Also note that the recognition of various domestic browsers, such as certain security browsers, such and such a whirlwind browser, they just do a shell, the core call is IE, but also support both IE and Webkit-called "dual-core" Browse device.

Differences in different browsers with JavaScript support mainly, some API interfaces are not the same, such as AJAX, File interface. For ES6 standards, different browsers are not the same for each feature support.

When writing JavaScript, we must fully take into account differences in the browser, as far as possible with a JavaScript code to run in different browsers.

Browser Object

JavaScript Object Browser can get a lot of offers, and operate it.

window

The window object not only act as a global scope, and represents the browser window.

innerWidth innerHeight the window object and property may be acquired internal width and height of the browser window. It refers to the internal width and height after removal of the menu bar, tool bar, borders, etc. occupying elements, for displaying a high clear width of the page.

Corresponding to, and there is a outerWidth outerHeight properties, can get the entire width and height of the browser window.

// 可以调整浏览器窗口大小试试:
console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);

navigator object represents the browser's information, the most common attributes include:

navigator.appName: Browser name;
navigator.appVersion: browser version;
navigator.language: language browser settings;
navigator.platform: operating system type;
navigator.userAgent: browser settings User-Agent string

console.log('appName = ' + navigator.appName);
console.log('appVersion = ' + navigator.appVersion);
console.log('language = ' + navigator.language);
console.log('platform = ' + navigator.platform);
console.log('userAgent = ' + navigator.userAgent);

Please note that the information navigator can be easily modified by the user so the value of reading JavaScript is not necessarily correct.

screen object represents information screen, commonly used attributes are:

screen.width: screen width, in pixels;
screen.height: screen height in pixels;
screen.colorDepth: Returns the number of color bits, such as 8,16,24.

console.log('Screen size = ' + screen.width + ' x ' + screen.height);

location information object represents the URL of the current page. For example, a complete URL:

It can be obtained by location.href. To get the value of each part of the URL, you can write:

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

If you want to reload the current page, call location.reload () method is very convenient.

document object represents the current page. Because HTML DOM represented in the form of a tree structure in the browser, document object is the root of the whole DOM tree.

The title attribute is the document from HTML document xxxread, but can be changed dynamically:

document.title = '努力学习JavaScript!';

the getElementById () and the getElementsByTagName () provided with a document object can be obtained by a DOM node ID and a group obtained by DOM node name Tag!
JavaScript can read the Cookie to the current page by document.cookie:

history

history object holds the history of the browser, JavaScript can call back history object () or forward (), equivalent to the user clicks on the browser's "back" or "forward" button.

The object belongs to the object left over by history, for modern Web pages, because of extensive use of AJAX pages and interactive, simple and crude call history.back () may make people feel very angry.

History.back like to call upon successful login at the login page when newcomers began to design Web pages (), attempts to return to the page before login. This is a wrong approach.

In any case, you should not use the history of this object.

JUDGMENT

Because HTML document after being parsed is the browser DOM tree, to change the HTML structure, you need to manipulate the DOM using JavaScript.

Always remember DOM is a tree structure. Operating a DOM node is actually so few actions:

Update: update the DOM node corresponding to the updated content of the HTML DOM node represents;
Traversing: traversing a child node in the DOM node for further operation;
Add: add a child node in the DOM node corresponds to an increase of a dynamic HTML nodes;
Delete: Delete the node from HTML, equivalent to delete the contents of the DOM node and all child nodes it contains.

Before operating a DOM node, we need a variety of ways to get this DOM node. The most commonly used method is document.getElementById()anddocument.getElementsByTagName()

Since the ID is unique, it is an HTML document document.getElementById () may be positioned directly in a unique DOM node. document.getElementsByTagName () and document.getElementsByClassName () always returns a set of DOM node. To precisely select the DOM, a parent node may first locate, and then selecting from the parent node begins to narrow.

// 返回ID为'test'的节点：
var test = document.getElementById('test');

// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

Update the DOM

After getting a DOM node, we can update it.

Text node may be modified directly, in two ways:

One is to modify innerHTMLthe properties, this approach is very powerful, can not only modify the text content of a DOM node, you can also modify the internal node in the subtree of the DOM directly through the HTML fragment:

// 设置文本为abc:
p.innerHTML = 'ABC';

The second is to modify or innerText textContent properties, which can automatically encode HTML string, can not be set to ensure that any HTML tags;

// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

Into the DOM

When we get a certain DOM nodes want to insert new DOM in the DOM node, what should you do?

If the DOM node is empty, for example,

, Then the direct use of innerHTML = child you can modify the contents of DOM nodes, equivalent to "insert" a new DOM node.

If the DOM node is not empty, you can not do that because innerHTML will directly replace the original all child nodes.

There are two ways you can insert a new node. One is to use appendChild, to add a child node to the last child of the parent node. E.g:

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

The

JavaScript

add to

The last item:

var
    js = document.getElementById('js'),
    list = document.getElementById('list');
list.appendChild(js);

More often we will create a new node from zero, and then inserted into the specified location:

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

Dynamically create and add a node to the DOM tree, you can achieve a lot of functions. For example, the following code dynamically creates a

JavaScript study notes (4) --- On the BOM and DOM operations