javaScript中的DOM补充

一、DOM树

二、DOM节点

DOM 是这样规定的：
   整个文档是一个文档节点
   每个 HTML 标签是一个元素节点
   包含在 HTML 元素中的文本是文本节点
   每一个 HTML 属性是一个属性节点

其中，document与element节点是重点。

三、节点查找

（1）直接查找节点

document.getElementById(“idname”)

document.getElementsByTagName(“tagname”)

document.getElementsByName(“name”)

document.getElementsByClassName(“name”)

<div id="div1">

    <div class="div2">i am div2</div>

    <div name="yuan">i am div2</div>

    <div id="div3">i am div2</div>

    <p>hello p</p>

</div>

<script>

   var div1=document.getElementById("div1");

</script>

局部查找

（2）、导航节点属性

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

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

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

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

注意，js中没有办法找到所有的兄弟标签！

四、节点操作

（1）、创建节点

1.createElement(标签名) ：创建一个指定名称的元素。

例：var tag=document.createElement(“input")
tag.setAttribute('type','text');

（2）、添加节点

2.somenode.appendChild(newnode) ：追加节点（作最后的子节点）

（3）、删除节点

3.removeChild()：获得要删除的元素，通过父元素调用删除

（4）. 替换节点

4. somenode.replaceChild(newnode, 某个节点);

五、节点属性操作

1、获取文本节点的值：innerText innerHTML

2、attribute操作

elementNode.setAttribute(name,value)    

     elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

     elementNode.removeAttribute(“属性名”);

3.value获取当前选中的value的值

   1.input
       2.select （selectedIndex）
       3.textarea

4、innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;

5、关于class的操作：

elementNode.className

elementNode.classList.add

elementNode.classList.remove

6、改变css样式：

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

                             .style.fontSize=48px

六、事件类型

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

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

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

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

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

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

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

onkeyup        某个键盘按键被松开。

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

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被移动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

onmouseleave   鼠标从元素离开

onselect       文本被选中。

onsubmit       确认按钮被点击。

七、绑定事件

方式一：

<div id="div" onclick="foo(this)">点我呀</div>

<script>

    function foo(self){           // 形参不能是this;

        console.log("点你大爷!");

        console.log(self);

    }

</script>

方式二：

<p id="abc">试一试!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){

        console.log("ok");

        console.log(this);    // this直接用

    };

</script>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="" id="submit">

    <p>姓名<input type="text" name="user" id="user"></p>

    <p>年龄<input type="text" name="age" id="age"></p>

    <input type="submit" >

</form>

<input type="text" id="test">

<script>

    var ele_form=document.getElementById("submit");

    var ele_user=document.getElementById("user");

    var ele_age=document.getElementById("age");

    ele_form.onsubmit=function (event) {

        var username=ele_user.value;

        var age=ele_age.value;

        alert(username);

        alert(age);

        // 两种阻止默认事件发生的方式

        // 方式1

        return false

        // 方式2

        // event.preventDefault()

    }

</script>

<script>

    var ele=document.getElementById("test")

    ele.onkeydown=function (e) {

        console.log(e.keyCode);

        if (e.keyCode==13){

            alert(666)

        }

    }

</script>

</body>

onsubmit事件

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            background-color: wheat;

        }

        .c2{

            width: 100px;

            height: 100px;

            background-color: royalblue;

        }

    </style>

</head>

<body>

<div class="c1">

    <div class="c2"></div>

</div>

<script>

    var ele1=document.getElementsByClassName("c1")[0];

    var ele2=document.getElementsByClassName("c2")[0];

    ele1.onclick=function () {

        alert(123)

    };

    ele2.onclick=function (event) {

        alert(456);

        event.stopPropagation() // 阻止事件传播

    }

</script>

</body>

事件传播

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .back{

            width: 100%;

            height: 2000px;

            border: 1px solid red;

        }

        .shade{

            position: fixed;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            background-color: darkgray;

            opacity: 0.5;

        }

        .model{

            position: fixed;

            top: 100px;

            left:40%;

            width: 300px;

            height: 200px;

            background-color: white;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="back">

    <button id="add">add</button>

</div>

<div class="shade hide"></div>

<div class="model hide">

    <form action="">

        <p>姓名<input type="text"></p>

        <p>年龄<input type="text"></p>

        <input type="button" id="btn" value="提交">

    </form>

</div>

<script>

    var ele_add=document.getElementById("add");

    var ele_mdoel=document.getElementsByClassName("model")[0];

    var ele_shade=document.getElementsByClassName("shade")[0];

    ele_add.onclick=function () {

        ele_mdoel.classList.remove("hide");

        ele_shade.classList.remove("hide")

    }

</script>

</body>

</html>

模态对话框

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 500px;

            height: 300px;

            border: 1px solid red;

        }

    </style>

    <script>

       window.onload=function () {

           var ele=document.getElementsByClassName("addBtn")[0];

           var ele_del=document.getElementsByClassName("delBtn")[0];

           var eleBtn=document.getElementsByClassName("repalceBtn")[0];

           // 绑定的添加节点事件

            ele.onclick=function () {

                // 创建一个a标签

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

                console.log(ele_a);       //  <a></a>

                ele_a.innerHTML="点击";   //  <a>点击</a>

                ele_a.setAttribute("href","http://www.baidu.com");

                ele_a.id="d1";

                // 创建img标签

                var ele_img=document.createElement("img");  // <img>

                ele_img.src="Bootstrap_i2.png";   //  <img src="">

                ele_img.height=50;

                ele_img.width=50;

                // 添加标签

                // 找到父标签

                ele_p=document.getElementsByClassName("c1")[0];

                // ele_p.appendChild(ele_a)

                ele_p.appendChild(ele_img)

            };

           // 绑定删除节点事件

            ele_del.onclick=function () {

                var ele_p=document.getElementById("p1");

                var ele_parent=document.getElementsByClassName("c1")[0];

                ele_parent.removeChild(ele_p);

            };

           // 绑定替换节点事件

            eleBtn.onclick=function () {

                //创建的 新节点

                var ele_img=document.createElement("img");  // <img>

                ele_img.src="Bootstrap_i2.png";   //  <img src="">

                ele_img.height=50;

                ele_img.width=50;

                // 被替换的节点

                 var ele_p=document.getElementById("p1");

                 // 父节点

                var ele_parent=document.getElementsByClassName("c1")[0]

                // 做替换

                ele_parent.replaceChild(ele_img,ele_p)

            }

            //  表格操作

            var eles=document.getElementsByClassName("del") ;

            for(var i=0;i<eles.length;i++){

            eles[i].onclick=function () {

                // console.log(this.parentElement.parentElement);

                var ele_tr=this.parentElement.parentElement;

                var ele_tbody=document.getElementById("t1");

                ele_tbody.removeChild(ele_tr);

                console.log(ele_tbody)

            }

        }

           };

    </script>

</head>

<body>

<div class="c1">

     <p id="p1">p1</p>

</div>

<button class="addBtn">ADD</button>

<button class="delBtn">del</button>

<button class="repalceBtn">repalceBtn</button>

<hr>

<table border="1" >

    <tbody id="t1">

         <tr>

             <td><input type="checkbox"></td>

             <td><input type="text"></td>

             <td><button class="del">del1</button></td>

         </tr>

         <tr>

            <td><input type="checkbox"></td>

            <td><input type="text"></td>

            <td><button class="del">del2</button></td>

         </tr>

        <tr>

            <td><input type="checkbox"></td>

            <td><input type="text"></td>

            <td><button class="del">del3</button></td>

         </tr>

       <tr>

            <td><input type="checkbox"></td>

            <td><input type="text"></td>

            <td><button class="del">del3</button></td>

       </tr>

    </tbody>

</table>

<div>

    <div>

        <div></div>

    </div>

</div>

</body>

</html>

节点操作

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" value="username" id="search">

<script>

   var ele=document.getElementById("search")

    ele.onfocus=function () {

         this.value=""

    };

    ele.onblur=function () {

        if(this.value.trim()==""){

            this.value="username"

        }

    }

</script>

</body>

each示列

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input id="ID1" type="text" onclick="begin()">

<button onclick="end()">停止</button>

<script>

    function showTime(){

           var nowd2=new Date().toLocaleString();

           var temp=document.getElementById("ID1");

           temp.value=nowd2;

    }

    var ID;

    function begin(){

        if (ID==undefined){

             showTime();

             ID=setInterval(showTime,1000);

        }

    }

    function end(){

        clearInterval(ID);

        ID=undefined;

    }

</script>

</body>

</html>

onchange事件

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input id="ID1" type="text" onclick="begin()">

<button onclick="end()">停止</button>

<script>

    function showTime(){

           var nowd2=new Date().toLocaleString();

           var temp=document.getElementById("ID1");

           temp.value=nowd2;

    }

    var ID;

    function begin(){

        if (ID==undefined){

             showTime();

             ID=setInterval(showTime,1000);

        }

    }

    function end(){

        clearInterval(ID);

        ID=undefined;

    }

</script>

</body>

</html>

onmouse事件

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

</ul>

<button>Add</button>

<script>

    var eles_li=document.getElementsByTagName("li");

    var ele_btn=document.getElementsByTagName("button")[0];

    var ele_ul=document.getElementsByTagName("ul")[0];

//   添加li

    ele_btn.onclick=function () {

        var ele_li=document.createElement("li");

        ele_li.innerHTML=444;

        ele_ul.appendChild(ele_li)

    };

//    绑定事件

    for(var i=0;i<eles_li.length;i++){

        eles_li[i].onclick=function () {

            alert(this.innerHTML)

        }

    }

//     事件委派

//    ele_ul.addEventListener("click",function (e) {

//        console.log(e.target); // 标签

//        console.log(e.target.tagName); // 标签名称

//

//        if(e.target.tagName=="LI"){

//            console.log("OK")

//        }

//    })

</script>

</body>

事件委派

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    var s=12;

    function f(){

        console.log(s);  // undefined

        var s=12;        //

        console.log(s)   //

    }

    f();

</script>

</body>

</html>

作用域链

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input id="ID1" type="text" onclick="begin()">

<button onclick="end()">停止</button>

<script>

    function showTime(){

           var nowd2=new Date().toLocaleString();

           var temp=document.getElementById("ID1");

           temp.value=nowd2;

    }

    var ID;

    function begin(){

        if (ID==undefined){

             showTime();

             ID=setInterval(showTime,1000);

        }

    }

    function end(){

        clearInterval(ID);

        ID=undefined;

    }

</script>

</body>

</html>

时间框

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button class="selectAll">全选</button>

<button class="reverse">反选</button>

<button class="cancel">取消</button>

<hr>

<table border="1">

    <tr>

        <td ><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>222</td>

        <td>333</td>

    </tr>

    <tr>

        <td ><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>222</td>

        <td>333</td>

    </tr>

    <tr>

        <td ><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>222</td>

        <td>333</td>

    </tr>

    <tr>

        <td ><input type="checkbox" class="check"></td>

        <td>111</td>

        <td>222</td>

        <td>333</td>

    </tr>

</table>

<script>

    var ele_selectAll=document.getElementsByClassName("selectAll")[0];

    var ele_reverse=document.getElementsByClassName("reverse")[0];

    var ele_cancel=document.getElementsByClassName("cancel")[0];

    var ele_input=document.getElementsByClassName("check");

    ele_selectAll.onclick=function () {

        for(var i=0;i<ele_input.length;i++){

            ele_input[i].checked="checked"

        }

    };

    ele_cancel.onclick=function () {

        for(var i=0;i<ele_input.length;i++){

             ele_input[i].checked=""

        }

    };

     ele_reverse.onclick=function () {

        for(var i=0;i<ele_input.length;i++){

            var ele=ele_input[i];

            if(ele.checked){

                ele.checked=""

            }

            else {

                 ele.checked="checked"

            }

        }

    };

</script>

</body>

</html>

表格案例

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id="c1">

<select name="pro" id="s1">

        <option value="1">河北省</option>

        <option value="2">河南省</option>

        <option value="3">北京省</option>

</select>

<button>show</button>

<script>

    var ele_button=document.getElementsByTagName("button")[0];

    ele_button.onclick=function () {

        var ele_input=document.getElementById("c1");

        var ele_select=document.getElementById("s1");

        console.log(ele_select.value)

    };

</script>

</body>

</html>

获取value值

javaScript中的DOM补充的更多相关文章

借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
JavaScript中的DOM及相关操作
一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...
一些JavaScript中的DOM的优化小技巧
在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...
javascript中的DOM介绍（一）
一.基础知识点 1.DOM是文档对象模型,是针对HTML和XML文档的一个API(应用程序接口) 2.DOM描绘了一个层次化的节点数,允许开发人员进行添加,移除个修改等操作 3.IE浏览器中所有的DO ...
Javascript中的DOM实现显示鼠标的空间位置
为了显示鼠标相对于浏览器的位置(相对于屏幕和页面类似),我们能够利用click事件,获得关于鼠标单击的事件对象event.这个事件对象里的clientX和clientY包括了鼠标的位置信息,所以我突发 ...
初步总结javascript中学习DOM之前的知识
嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...

随机推荐

Splitting Pile
Splitting Pile Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement Snuke a ...
Oracle 常用
1. 级联查询在ORACLE 数据库中有一种方法可以实现级联查询select * //要查询的字段from table //具有子接点ID与父 ...
路径规划 Adjacency matrix 传球问题
建模问题是什么知道了问题是什么答案就ok了重复考虑与重复计算程序可以重复考虑但往目标篮子中放入时,放不放把握好就ok了. 集合交集并集 w 路径规划字符串处理 42423 424 ...
iOS 多线程之 NSOperation 的基本使用
1.NSOperation,NSOperationQueue 简介 NSOperation,NSOperationQueue是苹果提供给我们的一套多线程解决方案.实际上 NSOperation.NSO ...
MiniUI 在线示例
引用 http://miniui.com/demo/#src=datagrid/celledit.html
Java内存模型之happens-before
转载自 http://www.cnblogs.com/chenssy/p/6393321.html 无论处理器.JVM.编译器都会都保证程序正确的前提下尽可能的对指令执行效率进行优化,进行指令重 ...
Hibernate 框架入门(一)
1. SSH Web 层: Struts2 业务层: Spring 持久层: Hibernate 2. Hibernate 概述概述 Hibernate 是一个对象关系映射框架(ORM 框架); 对 ...
前端基础-html（1）
写在前面: 前端后端 C(client) S(server) B(browser) S(server) 以用户为出发点一.web标准 1)web ...
(扫盲)DTO数据传输对象
DTO即数据传输对象.但从定义上看就是简单的用来传递数据的.主要用途是在框架中定义DTO来绑定表现层中的数据.学过MVC.EF实体模型的都应该知道,我们可以定义一个Model实体来实现前后台数据的交互 ...
Django_随机验证码
随机验证码 Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 基本使用 1. 创建图片 from PIL import Image img = Imag ...

javaScript中的DOM补充

javaScript中的DOM补充的更多相关文章

随机推荐

热门专题