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 ...

随机推荐

【BZOJ4398】福慧双修（二进制，最短路）
题意: 此题中S=1 思路:Orz ManGod秒切此题我觉得出入边权互换不太直观,就改了一下写法第一次默认与1有关的第一条出边只出不入,第二次默认只入不出 ..]of longint; head ...
hdu3303
分析:一个最暴力的想法是把加入到集合S的数据一个个按顺序保存起来,然后每次查询的时候由后向前计算余数,如果遇到余数为0的,就直接把时间输出,否则就一直比较到最后找余数最小时间最晚的,这样查询的时间复杂 ...
用两种方法（递归和DP）实现了青蛙跳台阶
做了这道题目: https://www.nowcoder.net/practice/8c82a5b80378478f9484d87d1c5f12a4?tpId=13&tqId=11161&am ...
跳過 Windows RT的UI
RT启动进入常规桌面微软Surface RT发布的时间已经不短了,相信很多朋友都已经熟悉了这个全新的平板,并且已经上手.Surface RT开机默认进入的界面为Windows UI,这对于经常使用A ...
如何下载youtube的视频
1 登陆以下网址,输入视频地址,点击Download,然后右下角出现了链接,点击即可下载 http://en.savefrom.net/
Python FAQ1：传值，还是传引用？
在C/C++中,传值和传引用是函数参数传递的两种方式.由于思维定式,从C/C++转过来的Python初学者也经常会感到疑惑:在Python中,函数参数传递是传值,还是传引用呢? 看下面两段代码: de ...
【http代理报文】自己开发HTTP代理工具，不限语种。
我们知道通过修改浏览器设置可以使用代理访问网页,其实这个操作就是修改了每次的HTTP头. 工作中,我们难免需要通过TCP/IP协议发送HTTP报文来直接请求网页内容(比如爬虫工具),有同学问如何通过H ...
【总结】设备树语法及常用API函数【转】
本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74352188 一.DTS编写语法二.常用函数设备树函数思路是:uboot ...
C# 数据库访问
C# 数据库访问分类: C#学习笔记2011-07-05 11:26 515人阅读评论(0) 收藏举报数据库c#datasettextboxcommandexception 目录(?)[+ ...
java调用restful接口的方法
Restful接口的调用,前端一般使用ajax调用,后端可以使用的方法如下: 1.HttpURLConnection实现 2.HttpClient实现 3.Spring的RestTemplate

JS——dom

JS——dom的更多相关文章

随机推荐

热门专题