js-BOM-DOM

Introduced

BOM and DOM

BOM (Browser Object Model) refers to the browser object model that enables JavaScript capable browser to "talk." ECMAScript is the core javaScript, but if you want to use javaScript on the Web, then the BOM is the real core.

DOM (Document Object Model) refers to the document object model, through which you can access all the elements of the HTML document.

BOM-window target

BOM is the core object window, which represents an instance of the browser, but also the object Global ECMAScript predetermined window may be omitted when using, for example: window.document.write () can be abbreviated as: document.write ()

All browsers support the window object that represents the browser window

Some commonly used Window methods:

Internal height of the browser window - window.innerHeight
window.innerWidth - inside the browser window width
window.open () - opens a new window
window.close () - Close the current window

window child objects

window.onload()

When we bind events to elements on the page, you must wait until the document is loaded. Because we can not give binding element of a non-existent event.

window.onload event fires when the document load process ended. At this point, all objects in the document are located in the DOM, and all images, scripts, links, and sub-frames have finished loading.

navigator object

Browser object, the object can be determined by the browser used by the user, including browser-related information.

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

Screen object

Screen objects

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

history objects

window.history object contains the browser's history.

Browsing history object that contains the user's current page browsing history, but we can not see the specific address, can simply be used to move forward or backward a page.

history.forward() // 前进一页
history.back() // 后退一页

The location object

window.location object is used to get the address (URL) of the current page, and the browser is redirected to the new page.

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

Pop-up box

Alert box

alert("hello")

Confirmation box

Check box for the user to verify or receive certain information.

When the confirmation box appears, users need to click OK or Cancel button in order to proceed.

If the user clicks to confirm, the return value is true. If the user clicks Cancel, the returned value is false.

confirm("你确定吗？")

Tip box

Prompt box is often used to prompt the user to input a value before entering a page.

When the prompt box appears, users need to enter a value, then click OK or Cancel button to continue to manipulate.

If the user clicks to confirm, the return value is entered. If the user clicks Cancel, the returned value is null.

prompt("请在下方输入","你的答案")

Timer

setTimeout()

var t=setTimeout("JS语句",毫秒)

3秒后执行函数
var timer = setTimeout(function(){alert(123);}, 3000)

clearTimeout()

clearTimeout(setTimeout_variable)

setInterval()

setInterval("JS语句",时间间隔)

clearInterval()

clearInterval(setinterval返回的ID值)

HTML-DOM tree

DOM standard specifies that each component of an HTML document is a node (node):

Document node (document object): On behalf of the entire document
Element node (element object): represents an element (tag)
Node text (text object): Representative elements (tags) in the text
Node attribute (attribute objects): represents an attribute element (tag) have properties
Comments are comment nodes (comment Object)

JavaScript can create dynamic HTML through DOM:

JavaScript can change all the HTML elements on the page
JavaScript can change the properties of all HTML pages
JavaScript can change all CSS styles page
JavaScript can react to all events page

Gets node

Direct Find

document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集

Indirect Find

parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

Node operation

Creating nodes

var divEle = document.createElement("div");

Add Nodes

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1"); 
d1Ele.appendChild(imgEle);

Delete Node

somenode.removeChild(要删除的节点)

Replacement Node

somenode.replaceChild(newnode, 某个节点);

Node Properties

Gets the value of the text node

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

<div id="test">
   <span style="color:red">test1</span> test2
</div>
区别
test1 test2
<span style="color:red">test1</span> test2

Value of the text node

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

Operation attribute - attribute operations

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

Gets the value of the operation

elementNode.value

For the following tags:

.input
.select
.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class action

className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类 
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加

CSS operation

obj.style.backgroundColor="red"

JS CSS property law operation:

1. For the CSS property not used directly in the horizontal line of the general style. Attribute name. Such as:

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

2. CSS properties contained in the horizontal line, the first letter capitalized later horizontal line can be replaced. Such as:

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

event

Common events

onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
 
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
 
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
 
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。

Binding way

method one

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
　　 ths.style.backgroundColor="green";
}
</script>

Second way

<div id="d2">点我</div>
<script>
　　 var divEle2 = document.getElementById("d2");
　　 divEle2.onclick=function () {
　　　　 this.innerText="呵呵";
　　　}
</script>