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

随机推荐

XOR的艺术
题目描述 AKN觉得第一题太水了,不屑于写第一题,所以他又玩起了新的游戏.在游戏中,他发现,这个游戏的伤害计算有一个规律,规律如下 1. 拥有一个伤害串为长度为n的01串. 2. 给定一个范围[l,r ...
jQuery中事情的动态绑定 (转)
小弟初来乍到,还弄不清楚如何添加链接这是我转别人的,原文地址:http://blog.csdn.net/zhuyong0722/article/details/8590815#comments ...
Hihocoder 1337 (splay)
Problem 平衡树 SBT 题目大意维护一个序列,支持两种操作. 操作一:插入一个数. 操作二:询问第k小的数. 解题分析 ~~刷刷水题,再熟悉一下splay的基本操作. ps:哇咔咔,有连续四 ...
学一学书里的django是怎么写views.py的
他山之石,可以攻玉嘛. 好的习惯有时也是学别人来养成的. 外国人的编码习惯,学啊. from django.core.urlresolvers import reverse_lazy from dja ...
ArcGIS AO中控制图层中要素可见状态的总结
一.DefinitionExpression 实现新建查询图层,查询结果要素为选中状态该接口可以通过两种方法来控制要素的可见状态. 思路1 通过该接口的 DefinitionExpression 方 ...
PayPal加密证书.pem的生成
How do I create a public certificate for use with PayPal Encrypted Website Payments? Before you ca ...
XCode 7 高速切换代码窗体和文档窗体
XCode 7 高速切换代码窗体和文档窗体太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...
Android面试题1
1.Android中intent的是? 答:实现界面间的切换,能够包括动作和动作数据.连接四大组件的纽带. 2.SAX解析xml文件的长处的是? 答:不用事先调入整个文档,占用资源少 3.在andro ...
Android首次启动时间长优化之预编译提取Odex
提示!应用程序的安装有两种情况,第一:首次启动系统时安装.第二:系统启动完毕后安装. 本篇博文基于第一种安装场景.在系统首次启动的场景中,系统会对/system/app./system/pri ...
Unix/Linux环境C编程新手教程(40) 初识文件操作
1.函数介绍 close(关闭文件) 相关函数 open,fcntl,shutdown.unlink,fclose 表头文件 #include<unistd.h> 定义函数 int ...

JS——dom

JS——dom的更多相关文章

随机推荐

热门专题