JavaScript之DOM详细使用实例

来源：互联网发布：手办买卖吧淘宝店铺编辑：程序博客网时间：2024/06/06 07:32
**DOM**<script type="text/javascript">/* * EMCA:   dom:文档对象模型  标签化成节点   bom:浏览器对象模型 */ windom.onload = function(){//onload 等页面元素加载完毕采取执行Java //获取节点的几种方式  1.通过id    var obj = document.getElementById("li1");    alert(obj);    var obj2 = document.getElementsByTagName("li")[0];//选择第一个    alert(obj2.length);    var obj3 = document.getElementsByName("n1")[0];    alert(obj3);   }</script></head><body>    <img alt="" src="555.jpg" width="250px" height="200px">    <ul>        <li id="li1">何家豪</li>        <li>何小浩</li>        <li>何大浩</li>    </ul>    <form>        兴趣:<input type="checkbox" name="n1" value="1">足球    </form></body>**获取节点的操作**<script type="text/javascript">    /* 节点关系 ：1.子节点              2.父节点              3.兄弟节点    */    window.onload = function(){        var obj = document.ElementById("u1");        var child = obj.firstElementChild;//第一个子节点        var child2 = obj.lastElementChild;//获取最后一个子元素        child.style.color = "red";        child2.style.color = "green";//      alert(child.innerHTML);        //获取任意子节点方法        var child3 = obj.children;//获取所有的子节点//      alert(child.length);        var child4 = allChild[3];        child4.style.color = "blue";        //获取父节点        var parent = obj.parentNode;        parent.style.border = "2px solid red";        //获取兄弟节点        var bro1 = obj.previousElementSibling;//上一个兄弟节点        bro1.style.color = "green";        var bro2 = obj.nextElementSibling;//下一个兄弟节点        bro2.style.color = "red";    }</script>**节点的增删改**<script type="text/javascript">    /* 节点操作：增   删    改 */    function add(){        //创建节点        var newObj = document.createElement("p");//创建一个元素节点 <p>        //添加文本内容        var text = document.createTextNode("我是一个新添加的p段落内容。。");        newObj.appendChild(text); //添加子节点        var obj = document.getElementById("d1");        obj.appendChild(newObj); //添加到div里面    }    //添加附带属性的节点    function add2(){        var obj = document.getElementById("d1");        //创建节点        var img = document.createElement("img");        img.src = "444.jpg";        img.setAttribute("style","width:200px;height:200px");        //创建属性        var attr = document.createAttribute("good");//创建一个新的属性        attr.value = "我是新创建的属性";  //给属性赋值        //将属性添加到节点上     //  img.appendAttributeNode(attr);    //  img.setAttribute(attr.to,"我是新创建的属性");        //将节点添加到父节点里面        obj.appendChild(img);    }    //在子节点之前插入节点    function add3(){        var obj = document.getElementById("d1");        //创建节点        var img = document.createElement("img");        img.src = "444.jpg";        img.setAttribute("style","width:200px;height:200px");        obj.parentNode.insertBefore(img,obj);//插入节点的父节点调用此方法  (插入节点，被操作节点)    }    //自定义一个方法实现在节点后面插入节点    function insertAfter(newElement,oldElement){        var parent = oldElement.parentNode;//获取要操作的节点的父节点        if(parent.lastElementChild == oldElement){//刚好是最后一个节点            parent.appendChild(newElement);        }else{//不是最后一个节点   在下一个兄弟节点前面插入            parent.insertBefore(newElement,oldElement.nextElementSibling);        }    }    function add4(){        var obj = document.getElementById("d1");        //创建节点        var img = document.createElement("img");        img.src = "444.jpg";        img.setAttribute("style","width:200px;height:200px");        insertAfter(img,obj);    }    //替换节点    function f5(){        var obj = document.getElementById("p1");        //创建节点        var img = document.createElement("img");        img.src = "444.jpg";        img.setAttribute("style","width:200px;height:200px");        obj.parentNode.replaceChild(img,obj);  //替换节点    }    //删除节点    function f6(){        var obj = document.getElementById("p2");        obj.parentNode.removeChild(obj);    }</script>**事件**<script type="text/javascript">    /* 事件组成：句柄     事件源 */    //定义事件的方式：1.内嵌     2.注册监听    window.onload = function(){        //内嵌        var obj = document.getElementsByTagName("input")[0];        obj.onclick = function(){            alert("input被点击了。。。");        }        //给div内嵌事件        /* var obj2 = document.getElementById("d1");        obj2.onmouseover = function(){            alert("鼠标进入div。。。");        }        obj2.onmouseout = function(){            alert("鼠标出了div。。。");        } */        //给body添加一个鼠标按下时触发的事件        var obj3 = document.getElementsByTagName("body")[0];        obj3.onmousedown = function(){            alert("body被点击了。。。")        }    }    //注册监听    function f(){        alert("第二个input也被点击了。。");    }</script>**属性操作**<script type="text/javascript">    function f1(){        var obj = document.getElementsByTagName("img")[0];        alert(obj.getAttribute("title"));    }    function f2(){        var obj1 = document.getElementsByTagName("img")[0];        var obj2 = document.getElementsByTagName("img")[1];        obj1.setAttribute("src","222.jpg");        obj2.setAttribute("src","444.jpg");    }    function f1(){        var obj2 = document.getElementsByTagName("img")[0];        obj2.removeAttribute("title");//删除属性    }</script>**DOM操作**<script type="text/javascript">    window.onload = function(){        /* 作用一 */        var obj = document.getElementsByTagName("li")[0];//      alert(obj.innerHTML);//获取//      obj.innerHTML = "新社会北京";//设置//      alert(obj.innerText);//获取文本内容，去掉内层标签        /* 作用二 */        var obj2 = document.getElementsByTagName("img")[0];        alert(obj2.title);//获取属性  节点名字  属性名字        obj2.title = "这是改变后的标题！";//设置属性        obj2.src = "222.jpg";        /* 作用三  设置样式  */    }    function f(){        var obj = document.getElementsByTagName("div")[0];        obj.style.width = "400px";        obj.style.height = "400px";        obj.backgroundColor = "yellow";        obj.style.border = "2px solid blue";    }</script>
1 0