js知识-进阶

1 DOM

1.1 查找标签

（1）直接查找

document.getElementById(“idname”)          // dom对象

document.getElementsByTagName(“tagname”)   // dom对象集合 标签对象集合

document.getElementsByClassName(“name”)    // dom对象集合 标签对象集合

（2）导航查找

通过某一个标签定位到另一个标签

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

1.2 操作标签

（1）文本操作

取值操作

Dom对象.innerText

Dom对象.innerHTML

赋值操作：

Dom对象.innerText="hello world"

Dom对象.innerHTML="hello world"

（2）属性操作

console.log(Dom对象.属性)；

Dom对象.属性=值

console.log(dom对象.getAttribute("属性名"))

dom对象.setAttribute("属性名","值")

value： input,select,textarea

（3）class属性操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove

（4）css样式设置

Dom对象.style.样式属性=样式值

2 节点操作

2.1 创建节点

document.createElement("a")
var ele_a = document.createElement("a");
ele_a.href = "http://www.baidu.com";
ele_a.innerHTML = "百度";
console.log(ele_a);

2.2 添加节点

父节点.appendChild(添加节点)

2.3 删除节点

父节点.removeChild(子节点)

2.4 替换节点

父节点.replaceChild(新节点,被替换节点)

3 事件

3.1 概览

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

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

　　onfocus        元素获得焦点。               练习：输入框

　　onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

　　onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

　　onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

　　onkeypress     某个键盘按键被按下并松开。

　　onkeyup        某个键盘按键被松开。

　　onload         一张页面或一幅图像完成加载。

　　onmousedown    鼠标按钮被按下。

　　onmousemove    鼠标被移动。

　　onmouseout     鼠标从某元素移开。

　　onmouseover    鼠标移到某元素之上。

　　onmouseleave   鼠标从元素离开

　　onselect       文本被选中。

　　onsubmit       确认按钮被点击。

3.2 onload事件

　　onload 属性，只给body元素加。

　　这个属性的触发，标志着页面内容被加载完成。

　　应用场景: 当有些事情我们希望页面加载完立刻执行，那么可以使用该事件属性。

3.3 onsubmit

　　当表单在提交时触发

　　该属性也只能给form元素使用

　　应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

3.4 事件传播

<div class="outer">
    <div class="inner"></div>
</div>
<script>
    var outer = document.getElementsByClassName("outer")[0];
    var inner = document.getElementsByClassName("inner")[0];
    outer.onclick=function (e) {
        alert("out");
    }
    inner.onclick=function (e) {
        alert("inner");
        // 阻止事件传播
        e.stopPropagation();
    }
</script> 

3.5 阻止默认事件

<form action="" id="form">
    <p>用户名<input type="text" name="user" /></p>
    <p><input type="submit"/></p>
</form>
<script>
    var ele_form = document.getElementById("form");
    ele_form.onclick = function (e) {
        var inp = document.getElementsByName("user")[0];
        var user = inp.value;
        if( user.length > 10 || user.length < 5 ){
            // 阻止默认事件发生
            // 方式1
            // return false;
            // 方式2
            e.preventDefault();
        }
    };
</script> 

3.6 onkeydown

　　Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
　　事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.

<input type="text" id="inp" />
<script>
    var ele = document.getElementById("inp");
    ele.onkeydown = function (e) {
        e = e || window.event;
        var keynum = e.keyCode;
        var keychar = String.fromCharCode(keynum);
        console.log(keynum + "======>" + keychar);
    }
</script>