Some time ago to learn some of the basic syntax of JavaScript, but after completion of discovery and a browser with no interaction, and therefore there is need to learn the knowledge of DOM and BOM, in order to truly realize the interaction with the browser.
BOM (Browser Object Model) refers to the browser object model that enables JavaScript capable browser to "talk."
DOM (Document object Model) refers to the document object model, through which you can access all the elements of the HTML document.
A .window introduction of sub-objects
1.location objects
window.location object is used to get the address (URL) of the current page, and the browser is redirected to the new page.
Common properties and methods:
location.href //获取URL
location.href="URL" //跳转到指定页面
location.reload() //重新加载页面
2. A pop-up box
can be created in JavaScript Three message boxes: warning box, check box, balloon
/*警告框*/
alert("今天天气真好！")
/*确认框*/
confirm("请点击确定！")
/*提示框*/
prompt("请在下方输入"，"你的答案")
3. The timing-related
through the use of JavaScript, we can at a certain interval of time later to execute code, rather than immediately.
语法：
var t = setTimeout("JS语句"，毫秒)
setTimeout () after completion of execution will return a value, stored in the defined variable, if you want to cancel the timer, you can clear the value of the variable by using clearTimeout (), so as to achieve the purpose cancel timing.
//在指定时间之后执行一次函数
var t = setTimeout(function(){alert(123);},3000) //3秒后执行alert(123)
//取消setTimeout计时
clearTimeout(t)
setTimeout () method is performed only once within a predetermined time function change, but setInterval () method can be kept within the same call a function in the time interval until the clearInterval () method will stop execution or closing a window, usage and setTimeout () similar to .
Two .DOM Introduction
DOM (Document Object Model) is a set of methods for the content of the document and abstract conceptualization.
When the page is loaded, the browser will create a document object model of the page.
1. Find label
Find directly:
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
Indirect find:
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
2. node operation
Creating nodes
实例：var divEle = document.createElement("div");
Add Nodes
追加一个子节点
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
把增加的节点放到某个节点的前面：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "www.12345.com");
Delete Node
somenode.removeChild(要删除的节点) //somenode是要删除节点的父元素
Replacement Node
somenode.replaceChild(newnode, 某个节点); //somenode是要删除节点的父元素
Attribute nodes
divEle.innerText
divEle.innerHTML //获取文本节点的值
divEle.innerText="1"
divEle.innerHTML="<p>2</p>" //设置文本节点的值
attribute operation
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
In the form (input select textarea) If you want to view the content:
elementNode.value //查看上述三个标签中的内容
class operation
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
3. Event
Common events
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。