JS——dom

节点的获取

<script>

    var div = document.getElementById("box");//返回指定标签

    var div = document.getElementsByClassName("box")[0];//返回html标签元素数组

    var div = document.getElementsByTagName("div")[0];//返回html标签元素数组

</script>

访问关系：父节点、兄弟节点、单个子节点

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="box1">

        <div id="box2">我是box2的内容</div>

        <div id="box3">我是box3的内容</div>

    </div>

    <script>

        var parent = document.getElementById("box2").parentNode;//返回父节点元素

        var nextEle = document.getElementById("box2").nextSibling;//返回下一个节点（包括空文档和换行节点）

        var nextEle = document.getElementById("box2").nextElementSibling;//返回下一个节点（不包括空文档和换行节点）

        var previouEle = document.getElementById("box3").previousSibling;//返回上一个节点（包括空文档和换行节点）

        var previouEle = document.getElementById("box3").previousElementSibling;//返回上一个节点（不包括空文档和换行节点）

        var firstEle = document.getElementById("box1").firstChild;//返回子节点中的第一个节点（包括空文档和换行节点）

        var firstEle = document.getElementById("box1").firstElementChild;//返回子节点中的第一个节点（不包括空文档和换行节点）

        //var lastEle = document.getElementById("box1").lastChild;//返回子节点中的最后一个节点（包括空文档和换行节点）

        var lastEle = document.getElementById("box1").lastElementChild;//返回子节点中的最后一个节点（不包括空文档和换行节点）

        var childEles = document.getElementById("box1").childNodes;//返回所有子节点的集合（包括空文档和换行节点）

        var childEles = document.getElementById("box1").children;//返回所有子节点的集合（不包括空文档和换行节点）

        console.log(childEles[0]);

    </script>

</body>

</html>

随意得到兄弟节点

<script>

    function siblings(elm) {

        var a = [];

        var p = elm.parentNode.children;

        for (var i = 0, pl = p.length; i < pl; i++) {

            if (p[i] !== elm) a.push(p[i]);

        }

        return a;

    }

</script>

节点属性：nodeType、nodeValue、nodeName

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="box">你好</div>

    <script>

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

        var att = ele.getAttributeNode("id");//获得属性节点

        var txt = ele.firstChild;

        console.log(ele.nodeType);//

        console.log(att.nodeType);//

        console.log(txt.nodeType);//

        console.log(ele.nodeName);//div

        console.log(att.nodeName);//id

        console.log(txt.nodeName);//#text

        console.log(ele.nodeValue);//null

        console.log(att.nodeValue);//box

        console.log(txt.nodeValue);//你好

    </script>

</body>

</html>

节点操作：追加、插入、删除、复制、替换

追加，插入，删除的动作都是移动节点的操作
appendChild：父节点调用此方法，返回被移动的节点，实现效果是将一个节点移动到父节点的子节最后
insertBefore：父节点调用此方法，返回被移动的节点，实现效果是将一个节点移动到某个子节点之前
removeChild：父节点调用此方法，返回追移除的节点，实现效果是将一个节点移除
杀死自己：子节点.parentNode之后找到父节点，用父节点调用removeChild方法，将自己移除，返回被移除节点
replaceChild：父节点调用，返回被替换的节点对象
cloneNode：任意节点对象调用，返回一个复制的副本，参数为true表示深度克隆（什么都有），参数为false表示浅度克隆，没有innerText

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="box1">

    <div id="box2">我是box2的内容</div>

    <div id="box3">我是box3的内容</div>

</div>

<script>

    var newDiv = document.createElement("div");

    newDiv.innerHTML = "我是newDiv的内容";

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

    document.getElementById("box1").appendChild(newDiv); //在父节点中最后插入

    document.getElementById("box1").insertBefore(newDiv, box3);//在参考节点之前插入子节点

    document.getElementById("box1").removeChild(box3);//父节点移除指定子节点

    document.getElementById("box2").parentNode.removeChild(document.getElementById("box2"));//自己移除自己，一般在不知道父节点的情况下使用

    document.getElementById("box1").replaceChild(newDiv, box3);//新的子节点替换老的子节点

    console.log(document.getElementById("box2").cloneNode(true));//复制节点 true深度复制 false浅度复制

</script>

</body>

</html>

节点属性：获取、设置、删除

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="box1">

        <div id="box2">我是box2的内容</div>

        <div id="box3">我是box3的内容</div>

    </div>

    <a href="#123" id="a" class="a">123</a>

    <script>

        var newDiv = document.createElement("div");

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

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

        console.log(a.getAttribute("href"));//节点属性的获取

        a.setAttribute("href", "#456");//节点属性的设置

        a.removeAttribute("class");//节点属性的移除

    </script>

</body>

</html>

事件的绑定：1、函数绑定；2、匿名函数；3、行内绑定

<script>

    var div = document.getElementById("box");//返回指定标签

    div.onclick = fn;

    function fn() {

        alert(1);

    }

</script>

<script>

    var div = document.getElementById("box");

    div.onclick = function () {

        alert(1);

    }

    div.onclick = fn;

</script>

<div class="box" id="box" onclick="fn()"></div>

window.onload

html和js是同步加载的，js若放在html之前容易报错
onload可以预防报错，它是在页面或图像加载完成后触发的事件

value、innerHTML、innerText

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input id="inp1" type="text" value="我是inpput的value属性值" />

    <div id="box1">

        我是box1的内容

        <div id="box2">我是box2的内容</div>

    </div>

    <div id="box3">

        我是box1的内容

        <div id="box4">我是box2的内容</div>

    </div>

    <script>

        //value：标签的value属性。

        console.log(document.getElementById("inp1").value);

        //innerHTML：获取双闭合标签里面的内容。（识别标签）

        console.log(document.getElementById("box1").innerHTML);

        document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";

        //innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）

        console.log(document.getElementById("box3").innerText);

        document.getElementById("box3").innerText = "<h1>我是innerText</h1>";

    </script>

</body>

</html>

练习（一）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .top-banner {

            background-color: pink;

            height:60px;

        }

        .w {

            width: 1000px;

            margin: 10px auto;

            position: relative;

        }

        img {

            width: 1000px;

            height: 60px;

            background-color: blue;

        }

        a {

            position: absolute;

            top: 5px;

            right: 5px;

            width:20px;

            height:20px;

            color:#fff;

            background-color:black;

            font:700 14px/20px "simsum";

            text-align:center;

            text-decoration:none;

        }

        .hide{

            display:none;

        }

    </style>

</head>

<body>

    <div class="top-banner" id="topBanner">

        <div class="w">

            <img src="#" />

            <a href="#" id="closeBanner">╳</a>

        </div>

    </div>

    <script>

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

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

        closeBanner.onclick = function () {

            //topBanner.className += " hide";

            topBanner.style.display = "none";

        }

    </script>

</body>

</html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        window.onload = function () {

            var img = document.getElementById("box");

            img.onmouseover = function () {

                img.src = "image/jd2.png";

            }

            var img = document.getElementById("box");

            img.onmouseout = function () {

                this.src = "image/jd1.png";

            }

    </script>

</head>

<body>

    <img id="box" src="data:image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;" />

</body>

</html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        function fn() {

            pic.src = "456.jpg";

        }

        window.onload = function () {

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

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

            //btn.onclick = function () {

            //    pic.src = "456.jpg";

            //    return false; //组织a链接跳转

            //}

        }

    </script>

</head>

<body>

    <a href="http://www.baidu.com" id="btn" onclick="fn(); return false;">切换</a>

    <img src="123.jpg" id="pic" style="width:400px;"/>

</body>

</html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        button{

            margin:10px 0;

        }

        div{

            width:100px;

            height:100px;

            background-color:red;

        }

    </style>

</head>

<body>

    <button id="btn">隐藏</button>

    <div id="box">你好吗？</div>

    <script>

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

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

        btn.onclick = function () {

            if (btn.innerHTML == "隐藏") {

                box.style.display = "none";

                btn.innerHTML = "显示";

            } else {

                box.style.display = "block";

                btn.innerHTML = "隐藏";

            }

        }

    </script>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body {

            font-family: "Helvetica", "Arial", serif;

            color: #333;

            background-color: #ccc;

            margin: 1em 10%;

        }

        h1 {

            color: #333;

            background-color: transparent;

        }

        a {

            color: #c60;

            background-color: transparent;

            font-weight: bold;

            text-decoration: none;

        }

        ul {

            padding: 0;

        }

        li {

            float: left;

            padding: 1em;

            list-style: none;

        }

        #imagegallery {

            list-style: none;

        }

            #imagegallery li {

                margin: 0px 20px 20px 0px;

                padding: 0px;

                display: inline;

            }

                #imagegallery li a img {

                    border: 0;

                }

    </style>

</head>

<body>

    <h2>

        美女画廊

    </h2>

    <a href="#">注册</a>

    <ul id="imagegallery">

        <li>

            <a href="image/1.jpg" title="美女A">

                <img src="data:image/1-small.jpg" width="100" alt="美女1" />

            </a>

        </li>

        <li>

            <a href="image/2.jpg" title="美女B">

                <img src="data:image/2-small.jpg" width="100" alt="美女2" />

            </a>

        </li>

        <li>

            <a href="image/3.jpg" title="美女C">

                <img src="data:image/3-small.jpg" width="100" alt="美女3" />

            </a>

        </li>

        <li>

            <a href="image/4.jpg" title="美女D">

                <img src="data:image/4-small.jpg" width="100" alt="美女4" />

            </a>

        </li>

    </ul>

    <div style="clear:both"></div>

    <img id="image" src="data:image/placeholder.png" width="450px" />

    <p id="des">选择一个图片</p>

    <script>

        var ul = document.getElementById("imagegallery");

        var aArr = ul.getElementsByTagName("a");

        var img = document.getElementById("image");

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

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

            aArr[i].onclick = function () {

                img.src = this.href;//aArr[i].herf会出错，因为函数第一次加载注册的时候i停留在4，而且加载只加载函数名不加载函数体

                des.innerHTML = this.title;

                return false;

            }

        }

    </script>

</body>

</html>

JS——dom的更多相关文章

货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题频繁的与dom交互,是一件浪费时间与金钱的 ...
js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
Js DOM 详解
DOM事件类基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
JS DOM（文档对象模型）与BOM（浏览器对象模型）
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

随机推荐

解决使用myeclipse电脑卡的问题
1. 原因:myeclipse会自动更新,因此会占用大量内存 2. 解决方法: (1)window->Perferences->General->Startup and Shutdo ...
codevs2449 骑士精神
题目描述 Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者横坐标 ...
【待续】海思Hi3520A学习笔记
/********************************************************************* * By : ...
基于.NET平台常用的框架整理（转）
基于.NET平台常用的框架整理分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问 ...
vue2的简单Popup (Confirm,Alert)组件
github: https://github.com/longfei59418888/vui (记得给一个 start,以后有一起讨论,各种好组件) demo :http://60.205.20 ...
Hadoop AWS Word Count 样例
在AWS里用Elastic Map Reduce 开一个Cluster 然后登陆master node并编译下面程序: import java.io.IOException; import java. ...
InnoDB: Error: Table "mysql"."innodb_table_stats" not found.
1,Mysqldump的时候报错例如以下: 2014-05-05 14:12:37 7f004a9a2700 InnoDB: Error: Table "mysql"." ...
C++学习之模板特例化
模板是C++中一个很重要的特性,写一份代码能用于多种数据类型(包括用户自定义类型).例如,STL的sort()函数可以用于多种数据类型的排序,类stack可以用作多种数据类型的栈.但是,如果我们想对特 ...
读书笔记-APUE第三版-(7)进程环境
本章关注单进程执行环境:启动&终止.參数传递和内存布局等. 进程启动终止如图所看到的: 启动:内核通过exec函数执行程序,在main函数执行之前.会调用启动例程(start-up rout ...
Test While You Sleep (and over Weekends)
Test While You Sleep (and over Weekends) Rajith Attapattu RELAX. I am not referring to offshore deve ...

JS——dom

JS——dom的更多相关文章

随机推荐

热门专题