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

随机推荐

170611 NOIP模拟赛
第一题没做出来不应该: 第二题不难想,就是写起来很麻烦: 第三题因为学了挺久的splay就直接写的splay,没太在意常数问题,一般情况下,第k值问题主席树是比splay稍快的: 盘子序列 [题目描述 ...
Ubuntu 16.04安装uGet替代迅雷，并在Chrome中设置为默认下载器
uGet是采用aria2作为下载后端,所以两个软件都必须同时安装. 1.安装uGet sudo add-apt-repository ppa:plushuang-tw/uget-stable sudo ...
sql server 2016
https://www.microsoft.com/zh-cn/server-cloud/products/sql-server/
php oop-1
<?php //类的定义以 class 关键字开始后面跟类的名称通常第一个字母大写以大括号开始和结束 //类的属性和方法前面都要加关键字例如public class NbaPla ...
Mentor.Graphics.FloTHERM.XT.2.3+Mentor.Graphics.Flowmaster.7.9.4
Mentor.Graphics.FloTHERM.XT.2.3 Mentor.Graphics.Flowmaster.7.9.4 AVL.CRUISE.V2015.0-车辆动力学仿真分析平台 AVL. ...
Python3标准库（一）内置函数
Python中内置了很多的函数,而学习标准库我们需要事先熟悉这些内置函数,所以在这里一个个进行介绍.有些函数比较简单,只给予文字描述,而有些函数会给出示例代码帮助理解. 1.abs(x):返回一个整数 ...
C#根据规则生成6位随机码
#region 获得6位优惠码 zhy public static string CreatePromoCode(string code) { if (code == "") { ...
SOA究竟是个啥
SOA(Service-Oriented Architecture),中文全称:面向服务的架构. SOA让把系统分离成不同的服务,使用接口来进行数据交互,终于达到整合系统的目的. 专业的词总是让人懵懵 ...
click事件触发也有失灵的时候？
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
TeX中的引号
#include <stdio.h> #include <math.h> // 算法竞赛的目标是编程对任意输入均得到正确的结果. // 请先独立完成,如果有困难可以翻阅本书代码 ...

JS——dom

JS——dom的更多相关文章

随机推荐

热门专题