123 GOOD 和 SUN

A BOM operation
1.1 introduction

BOM: Browser Object Model, browser object model. BOM structure diagram:

As can be seen from the above figure:

#1, DOM objects are also part of the BOM

#2. The window object is the top (core) object of the BOM. It
should be noted that

#1、在调用window对象的方法和属性时，可以省略window，例如：window.document.location可以简写为document.location

#2、全局变量也是windows对象的属性，全局的函数时window对象的方法 

1.2 Object history, navigator, screen (just understand)

#1, the history object package does not contain the history of the browser

history.back() //后退一页，等同于history.go(-1)
history.forward() //前进一页，等同于history.go(1)
history.go(0) //0是刷新

Not much used. Because the browser has built-in buttons for these functions:

#2. The navigator object contains information about the browser.

navigator.appName　　// Web浏览器全称
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

#3, you can use the screen object to get the available screen width and height

screen.availWidth  //可用的屏幕宽度
screen.availHeight  //可用的屏幕高度

1.3 localtion object

location.href  //获取URL
location.href="URL" // 跳转到指定页面
location.reload() //重新加载页面

1.4 System dialog box pops up

alert(1)是window.alert(1)的简写，因为它是window的子方法。

There are three system dialogs:

alert("egon警告你：人丑还不读书，是找不到女朋友的"); //不同浏览器中的外观是不一样的
confirm("你真的要这么做吗小伙子");  //兼容不好
prompt("输入用户名：");   //不推荐使用

# Example
var x = confirm ( "Do you really want to do this to you")
console.log (the X-)

var username=prompt("Enter username:")
console.log(username);

1.5 Open and close windows

#1, open("url address", "new window location_blank or _self", "new window characteristics")

window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")

#2, close() close the current window

var x=window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")
x.close()

1.6 Height and width inside the browser window

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度 

1.7 Timer

#1.setTimeOut()
只在指定时间后执行一次，通常用于延迟执行某方法或功能，

//定时器 异步运行  
function say(){  
    alert("hello");  
}  
//使用方法名字执行方法  
var t1 = setTimeout(hello,1000);  
var t2 = setTimeout("hello()",3000); //使用字符串执行方法  
clearTimeout(t2); //去掉定时器


#2.setInterval()
在指定时间为周期循环执行，通常用于刷新表单，对于一些表单的假实时指定时间刷新同步，动画效果等。

//实时刷新时间单位为毫秒  
var t3 = setInterval(say,3000);   
var t4 = setInterval('say()',3000);   

clearInterval(t3);
clearInterval(t4);

Two DOM operation
2.1 introduction

When the web page is loaded, the browser will create the Document Object Model of the page. The DOM standard stipulates that each member in the HTML document is a node. The HTML DOM tree is as follows:

2.2 Find nodes

#1, direct search

document.getElementById                 #根据ID获取唯一一个标签
document.getElementsByClassName   #根据class属性获取一系列标签
document.getElementsByTagName     #根据标签名获取一系列标签

#2. Indirect lookup is shown in Table

2.3 to add nodes

#1、创建新节点
var divEle = document.createElement('div');

#2、追加一个子节点（放到最后）
somenode.appendChild(新的子节点)；

#3、插入一个子节点（插入到某个节点前）
somenode.insertBefore(新的子节点,某个节点); 

2.4 Delete and replace nodes

somenode.removeChild(要删除的子节点)；
somenode.replaceChild(新的子节点, 某个子节点); 

2.5 Modify/set node attributes

#1, get the value of the text node:

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

#2, set the value of the text node:

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

#3, attribute operation

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

#4, the built-in attributes can also be directly obtained and set by the attribute name

imgEle.src
imgEle.src="..."

2.6 Get the value of an element

#适用于input、select、textarea标签

var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')

x.value
y.value
z.value

2.7 class operation

var x=document.getElementById('div1')

x.classList.remove('col1')
x.classList.add('col1')
x.classList.contains('col1')
x.classList.toggle('col1')

2.8 css operation

obj.style.backgroundColor="red"

The law of JS operating CSS properties:

1. For CSS properties that do not have a horizontal line, generally use the style. property name directly. Such as:

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2. For CSS properties that contain a horizontal line, change the first letter after the horizontal line to uppercase. Such as:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily