Dom&bom of the JavaScript focus of the front-end base

Here's the point: BOM Object Window object:

所有浏览器都支持window对象.概念上讲 : 一个html文档对应一个window对象.功能上讲 : 控制浏览器窗口的.使用上讲 : window对象不需要闯将对象,直接使用即可.

window对象方法 :    > window.alter :     只做提醒用    > window.confirm :     会返回一个框 布尔值    true或者false    > window.prompt :      会返回你输入的值.    >open() : 打开一个新的浏览器窗口或查找一个已命名的窗口.    >close() : 关闭浏览器窗口.    >setInterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式.    >clearInterval() : 取消由setInterval设置的timeout.    >setTimeout() : 在指定的毫秒数后调用函数或计算表达式.    >clearTimeout() : 取消由setTimeout设置的timeout.    >scrollTo() : 把内容滚动到指定的坐标.

DOM (the most important thing in JS)

DOM: Defines a standard way to access (find) and manipulate HTML documents.

Dom?? The purpose of the tree is to label navigation.

Each tag of the HTML is a node object

Both the document and element are nodes.

节点 :     1. 在节点数中,顶端节点被称为根(root).    2. 每个节点都有父节点,除了根.    3. 一个节点可以拥有任意数量的子    4. 同胞是拥有相同父节点的节点

Node operations

# # # #节点查找//Direct location var document.getElementById ("Idname") ("D1");  Label Object Ele.getelementbyclassname ("name") ("C1"); Array object, even if only one, it is an array. document.getElementsByTagName ("TagName") ("P")//Tag name Ele.getelementsbyname ("name");                 For example, some input will define a name = "") Navigation Lookup: Locating certain tags through a tag previous: Previous next: Next sibling: Sibling parentelement//parent node Tag element children All child tags firstelementchild//first child tag element lastelementchild///Last Child tag element nextelementtsibling// Next brother Tag element previouselementsibling//Previous sibling Tag element # # # #节点操作1 Create node: document.createelement ("tag name") 2 Add node: Ele_ Parent.appentchild (Ele_child) If it is an IMG tag, add numbers directly behind the height and width, do not need to write quotes and px3 delete nodes: Ele_parent.removechild (Ele_child) 4 Replacement node: Ele_parent.replacechild (Ele_child) 5. Node properties Operations 1. Get the value of the text node: InnerText InnerHTML 2.attribute operation: Elementnode.setattribute (Name,value) E    Lementnode.getattribute (attribute name) elementnode.removeattribute ("attribute name"); 3.value gets the currently selected value 1. Input 2.        Select (SelectedIndex)3. TextArea 4.innerHTML Add HTML code to the node: This method is not a standard for the web, but is supported by mainstream browsers.    tag.innerhtml = "<p> content to be displayed </p>"; 5. About class Operation 1.elementnode.classname 2.elementnode.classlist.add: Add 3.elementnode.classlist.remove        : Delete 6. Change CSS style <p id= "P1" >hello world</p> document.getElementById ("P1"). style.color= "White"; document.getElementById ("P1"). style.fontsize=36px;

DOM Event (events)

事件类型 :    onclick : 当用户点击某个对象时调用的事件句柄.    ondblclick : 当用户双击某个对象时调用的事件句柄.    onfocus : 元素获得焦点.--用于输入框    onblur : 元素失去焦点.--应用场景 : 用于表单验证,当用户离开某个输入框时,代表已经输入完了.    onchange : 域的内容被改变.--应用场景 : 通常用于表单元素,当元素内容被改变时触发.(多级联动.)    onkeydown : 某个键盘按键被按下.--应用场景 : 当用户在最后一个输入框按下回车键时,表单提交.    onkeypress : 某个键盘按键被按下并松开.    onkeyup : 某个键盘按键被松开.    onload : 一张页面或者一幅图像完成加载.    onmousedown : 鼠标按钮被按下.    onmousemove : 鼠标被移动.    onmouseout : 鼠标从某元素移开.    onmouseover : 鼠标移动到某个元素之上.    onmouseleave : 鼠标从某个元素离开.    onselect : 文本被选中.    

节点属性 :     <div class="c1">div</div>    1. 文本属性 :        var ele=document.getElementsByClassName(‘c1‘)[0];        //赋值操作        ele.innerText=‘egon‘        ele.innerHTML=‘egon‘        //取值操作        console.log(ele.innerText);        console.log(ele.innerHTML);  #既可以处理纯文本,也可以处理标签.    ***    2. class属性 : ????????????????        console.log(c1.className)   //当前标签的名字,不常用        c1.classList.add(‘c2‘);   //把c2的属性也拿过来用了        c1.classList.remove(‘c2‘); //把c2的属性给remove掉了    ***

Event Description:

1. OnLoad

   In the OnLoad property development, only the BODY element is added, and the triggering of this attribute indicates that the page content is loaded. ---scenario: You can use this event property when there are things that we want the page to execute immediately after it is loaded.

2. OnSubmit

   When a form is triggered on commit, this property can be used only for form elements. ---Reference scenario: Verify that the user input is correct before the form is submitted and, if the validation fails, block the form's submission in the method.

3. Event Propagation:

4. Onselect:

5. OnChange: Multi-level linkage

6. OnKeyDown:

   Event object: The Event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.

   Events are often used in conjunction with functions, and functions are not executed until the event occurs! The event object is already created when events occur, and is passed to the event function when the event function is called. We get just the need to receive it. For example, onkeydown, we want to specify which key is pressed, we need to ask the property of the event object, this is keycode.

7. The difference between onmouseout and OnMouseLeave events.

Dom&bom of the JavaScript focus of the front-end base