51 distal --BOM / DOM

GOOD

BOM (Browser Object Model) refers to the browser object model that enables JavaScript capable browser to "talk."

1. window objects

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的打开的页面)

window child objects

navigator object

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

screen objects

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

history objects

history.forward()  
// 前进一页，其实也是window的属性,window.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() 重新加载页面,就是刷新一下页面

2. A pop-up box

Three can be created in JavaScript message box: alert box, check box, message box.

Alert box

　 Alert box is often used to ensure that users can get some information.

　　　When the warning box appears, users need to click the OK button in order to proceed.

alert('看到了吗？');

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("你确定吗？")

Can return a true or false to determine what, then use the location to jump to the corresponding website based on this value.

<script>
    // alert('看到了吗？');
    b = confirm('你确定吗？');
    if (b){
        location.href='http://www.baidu.com'
    }else{
        window.close()
    }
</script>

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 does not enter Click OK, then return the default value is the second argument, if there is no default value is returned "." Click Cancel to return null

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

3. timer (***)

setTimeout: After a period of time to do something

语法：
var t=setTimeout("JS语句",毫秒)  第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的）

var a = setTimeout(function f(){
    confirm('确定吗？');},3000);        
    // function不用引号，3000是毫秒。 3s后执行函数。

clearTimeout (): Set to cancel setTimeout

语法：
clearTimeout(setTimeout_variable)

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
clearTimeout(timer);        // 取消setTimeout设置

setInterval (): every once in a while to do something

setInterval () method in accordance with a specified period (in milliseconds) to the calling function or calculation expression.

setInterval () method will continue to call the function, until the clearInterval () is called, or the window is closed. A setInterval () ID is used as a parameter value returns the clearInterval () method.

语法：
setInterval("JS语句",时间间隔);

clearInterval (): Set to cancel setInterval

the clearInterval () method cancels the timeout setInterval () set.

The clearInterval parameter () method must be the ID value of setInterval () returns.

语法：
clearInterval(setinterval返回的ID值)

Example:

var a = setInterval(function f1(){
    confirm("are you ok?");},3000);
clearInterval(a);

JUDGMENT

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 page of a document object model (Document Object Model).

HTML DOM model is constructed as an object tree.

1. 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 (mouse click, mouse movement events, etc.) for all events page

2. Find label

document.getElementById('id的值');    // 根据id获取一个标签
document.getElementsByClassName('类的值');   //根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName('标签名');     //根据标签名获取标签合集

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1" id="d1">这是div1标签
    <span id="s1">span1标签</span>
    <span id="s2">span2标签</span>
    <span id="s3">span3标签</span>
</div>

<div class="c2 cc2" id="d2">这是div2标签</div>
</body>
</html>

操作：
var divEle = document.getElementById('d1');
var divEle = document.getElementsByClassName('c1');
var divEle = document.getElementsByTagName('div');

3. Indirect Find

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

示例：
var divEle = document.getElementById('d1');
divEle.parentElement;   // body标签
divEle.children;    // 所有的子标签
divEle.firstElementChild; //第一个子标签
divEle.lastElementChild;
divEle.nextElementSibling;

4. Node Operation

Create a node :( create labels)

grammar:

　　createElement (name tag)

var aEle = document.createElement("a");

Add Nodes

grammar:

　　Append a child node (a child node as the last)

　　　　somenode.appendChild(newnode)；

　　The added nodes placed in front of a node.

　　　　somenode.insertBefore (newnode, a node);

示例：
var divEle = document.getElementById('d1');
var aEle = document.createElement("a"); //创建a标签
divEle.appendChild(aEle);   // 添加到div最后

var spanEle = document.getElementById("s2"); 
var pEle = document.createElement("p"); //创建p标签
divEle.insertBefore(pEle,spanEle);  // 添加到div中span2前

Delete node:

grammar:

　　Gets the element you want to delete, delete the method by calling the parent element.

　　somenode.removeChild (node ​​to be removed)

示例：
var divEle = document.getElementById('d1');
var span2 = document.getElementById('s2');
divEle.removeChild(span2);  //删除span2标签

Replace node:

grammar:

　　somenode.replaceChild (newnode, a node);

　　somenode is the parent label, and then find the parent label which should be replaced by sub-tab, and then use the new label to replace the sub-tag

示例：
var divEle = document.getElementById('d1');
var div3 = document.createElement("div");
var span2 = document.getElementById('s2');
divEle.replaceChild(div3,span2);    // 替换span2

Attribute node:

Gets the value of the text node

var divEle = document.getElementById("d1")
divEle.innerText  //获取该标签和内部所有标签的文本内容
divEle.innerHTML //获取的是该标签内的所有内容，包括文本和标签

Value of the text node

var divEle = document.getElementById("d1")
divEle.innerText="1";   // div中只要一个1，不能够识别标签
divEle.innerHTML="<a href=''>百度</a>" // 能识别标签

Create a label and set the value:

var dEle = document.createElement("div");
dEle.innerHTML = '这是div2';

Attribute Operation

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  // 比较规范的写法 给div标签增加age="18"的属性
divEle.getAttribute("age")      // 查看
divEle.removeAttribute("age")   // 删除

自带的属性：
aEle.href;      // 查看href属性的值
aEle.href = 'xxx';  // 修改href属性的值

示例：
<a href="http://www.baidu.com">百度</a>
操作
var a = document.getElementsByTagName('a');
a[0].href;  //获取值
a[0].href = 'xxx'; //设置值

Gets the value of the operation:

It applies to input, select, textarea tag.

grammar:

　　elementNode.value

input输入框
inpEle.value;       // 获取input标签输入的值
inpEle.value = 'xxx';   // 修改input标签输入的值

示例：
<div>
    用户名：<input type="text" name="username" id="username">
</div>
操作：
var inpEle = document.getElementById('username');
inpEle.value;   //获取输入框中输入的内容
inpEle.value = "SD"; // 设置输入框中的值为SD

select下拉框

selEle.value;   // 获取select标签中value的值
selEle.value='1';   // 设置select标签中value的值

示例：
<select name="city" id="select1">
        <option value="1">广东</option>
        <option value="2">惠州</option>
        <option value="3">东莞</option>
</select>
操作：
var selEle = document.getElementById('select1');
selEle.value;   // "2"

class action

获取标签对象
标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

classList.contains(cls)  判断类值是否存在，存在返回true

示例：动图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 cc" id="d"></div>
</body>
</html>

操作：
var dEle = document.getElementById("d");
var a = setInterval(function f(){dEle.classList.toggle("c2");},30);
clearInterval(a)

css setting operation

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。
obj.style.backgroundColor
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

示例：
设置值:
    divEle.style.backgroundColor = 'yellow';
获取值
    divEle.style.backgroundColor;

event

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

A way of binding events:

先找标签divEle
divEle.onclick = function (){
    divEle.style.backgroundColor = 'pink';
}       //左键捕获、触发

示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 " id="d"></div>
    <script>
        var dEle = document.getElementById("d");
        dEle.onclick = function f() {
            //dEle.style.backgroundColor = 'pink';
            this.style.backgroundColor = 'pink';
        }
    </script>
</body>
</html>
// 鼠标一点击会变颜色

Binding Events way:

在标签中添加 onclick = f() 属性
然后在 js中定义f()函数。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 " id="d" onclick="f()"></div>
    <script>
        function f() {
            var dEle = document.getElementById("d");
            dEle.style.backgroundColor = 'pink';
            
        }
    </script>
</body>
</html>

Get the current operation tag

属性中：onclick = f(this)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 " id="d" onclick="f(this);"></div>
    <script>
        function f(th){
            th.style.backgroundColor='purple';
            }
    </script>

</body>
</html>