js对dom的操作

js中的dom对象，也就是对html的操作

一.获取到html中元素

通过id获取：var document.getElementById("id名")/document.querySelector("#id名")
通过class名获取：var document.getElementsByClassName("class名")/document.querySelector(".class名")
通过标签获取：var documnet.getElementsByTagName("标签名")/document.querySelector("标签名")

二、改变html

改变输出流：document.write(Date());向网页中添加今天的日期。
改变html元素的内容：document.querySelector('p').innerHTML="内容"。
改变html元素的属性：document.querySelector("img").src="新的路径"

三、改变css

document.getElementById(id).style.property=new style
例：document.getElementById("p2").style.color="blue";

四、dom事件

点击事件：onclick
onmousedown/onmouseup:首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 和 onunload 事件可用于处理 cookie
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onchange:常结合对输入字段的验证来使用。适用于<input> <textarea> <select>。
onmouseover和onmouseout:用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
onfocus：在对象获得焦点时发生。

五、对dom节点的操作（添加、删除html元素）

创建新的HTML节点:必须先创建该元素，在向一个已存在的元素添加该元素
    var para = document.createElement('p')
    var div1=document.createElement('div')
    div1.appendChild(para)
删除已有的HTML元素:你必须首先获取该元素
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
    </div>
    <script>
        var parent=document.getElementById("div1");
        var child=document.getElementById("p1");
        parent.removeChild(child);
    </script>