JavaScript-DOM对象(Document Object Model)

最新推荐文章于 2024-04-14 13:06:36 发布

lioil.win

最新推荐文章于 2024-04-14 13:06:36 发布

阅读量293

点赞数

分类专栏： JavaScript 文章标签： html 对象浏览器 dom js

本文链接：https://blog.csdn.net/qq_32115439/article/details/78598158

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

介绍

HTML DOM(Document Object Model)定义了所有 HTML 元素的对象和属性/方法, 
HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。
浏览器加载Html页面时,会把Html元素封装在dom对象(document),document对象引用存放在window对象中。
var doc = window.document; //可以省略window

1.HTML DOM常用方法
    getElementById(id) - 获取带有指定 id 的节点（元素） 
    appendChild(node)  - 插入新的子节点（元素） 
    removeChild(node)  - 删除子节点（元素） 
    replaceChild()     - 替换子节点
    insertBefore()     - 在指定的子节点前面插入新的子节点
    createElement()    - 创建元素节点
    createTextNode()   - 创建文本节点
    createAttribute()  - 创建属性节点
    setAttribute()     - 把指定属性设置或修改为指定的值 
    getAttribute()     - 返回指定的属性值 

2.HTML DOM常用属性
    innerHTML  - 节点的文本值 
    attributes - 节点的属性节点
    nodeName   - 节点名（元素/属性/文本）
    nodeValue  - 节点值（元素/属性/文本）

    parentNode - 节点的父节点
    childNodes - 节点的子节点
    firstChild/lastChild
    nextSibling/previousSibling

一.获取document元素

<div id="_id" class="_cs" name="_ne" ></div>
<script>
    var d1 = document.getElementById("_id");
    var d2 = document.getElementsByTagName("div")[0];
    var d3 = document.getElementsByClassName("_cs")[0];
    var d4 = document.getElementsByName("_ne")[0];
</script>

二.给document元素添加事件

1.onclick事件
<input type="button" value="点击" id="id_btn" " />
<script>    
    var btn = document.getElementById("id_btn");        
    btn.onclick = function(){
        alert("点击啊啊啊啊");
    }
</script>

2.onblur/onfocus事件
<input type="text" id="one"  />
<script>
    var one = document.getElementById("one");       
    one.onblur=function(){
        alert("失焦");
    }
    one.onfocus=function(){
        alert("聚焦");
    }
</script>

3.onchange事件
<input type="text" id="one"  /> 
<select id="two" >
    <option>111</option>
    <option>222</option>
</select> 
<script>
    var one = document.getElementById("one");           
    one.onchange=function(){
        alert("option变了");
    }
    var two = document.getElementById("two");           
    two.onchange=function(){
        alert("input变了");
    }
</script>

4.onkeydown/onkeyup事件   
<input type="text" id="one"  />
<script>
    var one = document.getElementById("one");           
    one.onkeydown = function(event){
        if(event.keyCode == 13){ //按键unicode码是否回车               
            alert("回车");                    
        }
    }
</script>

5.onload事件
当document加载完成时触发    
<body onload="load()" >     
</body> 
<script>
    function load(){
        alert('加载完成')
    }
</script>

6.onmousedown/onmouseup/onmouseout/onmouseover/onmousemove
<div id="one"> </div>  
<script>    
    var one = document.getElementById("one");   
    one.onmousedown = function(event){ //鼠标按下
        alert(event.button);
    }
    one.onmouseup = function(event){  //鼠标抬起
        alert("onmouseup");
    }
    one.onmouseout = function(event){ //鼠标从某元素移开
        alert("onmouseout");
    }
    one.onmouseover = function(event){ //鼠标移到某元素之上
        alert("onmouseover");
    }
    one.onmousemove = function(event){ //鼠标移动
        alert(event.clientX + ", " + event.clientY);
    }
</script>

7.onsubmit表单提交
<form action="#" id="one"  >
    <input type="text"/><br>
    <input type="submit" value="提交" />
</form>
<script>
    var one = document.getElementById("one");
    one.onsubmit = function(event){         
        alert("拦截表单提交");
        //return false;
        event.preventDefault();//阻止默认事件发生
    }
</script>

8.阻止事件继续传播
<div id="one">
    <div id="two"></div>
</div>
<script>
    document.getElementById("one").onclick=function (){
        alert("one");
    }
    document.getElementById("two").onclick=function (event){
        alert("two");
        event.stopPropagation();//阻止事件继续传播给one
    }       
</script>

三.对document节点增删改成

<div id="div_"></div>

1.新增节点
var a = document.createElement("a");        
a.setAttribute("href", "http://www.baidu.com");         
a.innerHTML = "点击";
var div_= document.getElementById("div_");
div_.appendChild(a);

2.删除节点
var div_= document.getElementById("div_");
div_.parentNode.removeChild(div_);

3.替换节点  
var p = document.createElement("p");
p.innerHTML = "段落";     
var div_ = document.getElementById("div_");
div_.parentNode.replaceChild(p, div_);

4.克隆节点
var div_ = document.getElementById("div_");
var div_copy = div_.cloneNode(true);
div_.parentNode.insertBefore(div_copy, div_);

简书: http://www.jianshu.com/p/1eff601c9502
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/78598158
GitHub博客: http://lioil.win/2017/11/21/js-dom.html
Coding博客: http://c.lioil.win/2017/11/21/js-dom.html

lioil.win

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM对象(Document Object Model)

介绍HTML DOM(Document Object Model)定义了所有 HTML 元素的对象和属性/方法, HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。浏览器加载Html页面时,会把Html元素封装在dom对象(document),document对象引用存放在window对象中。var doc = window.document; //可以省略window1.H
复制链接

扫一扫