Day10(DOM,发布微博,节点轮播图)

函数封装,就一句话:
相同的,重复,封起来;
不同的,要改的,传进去

DOM(文档对象模型)

我们的JS分为三个部分组成

ECMAscript DOM BOM

核心(ECMAscript)欧洲计算机制造协会

描述了JS的语法,以及基本对象,相当于制定了JS的规则,例如
var a 和var A,是不一样的;

文档对象模型(DOM) 重点

处理网页内容的方法和接口

浏览器对象模型(BOM)

和浏览器的交互方法以及接口
例如,用浏览器获取用户地址。。。。。

1.1 DOM的定义

DOM为文档提供了结构化表示,并定义了如何通过脚本访问文档结构
目的其实就是为了能够让JS操作HTML元素而制定的规范

DOM树
image.png
1.2 节点

标签
由结构树可以看出,整个文档,他就是一个文档节点;
每个HTML标签都是一个元素节点
标签中的文字则是文字节点
标签的属性是属性节点
页面中的一切都是节点

1.3 访问节点

之前学过两种
getElementById()//用过ID访问节点
getElementsByTagName()//通过标签访问节点
getElementsByClassName()//通过类名获取节点,也是伪数组

但是,有小小的兼容性问题;
主流浏览器支持
IE 6 7 8不支持
怎么办?自己封装自己的类

1.3 封装自己的class类

原理:我们去除所有的盒子,用遍历的方法,通过每个盒子的className来判断,如果相等就留下

1.4 判断真假

我们用条件语句来判断5大数据类型的真假
数据类型 结论
数字类型: 所有数字都是真,包括负数,0是假;
字符串类型: 所有字符串都是真,” ”串为假;
对象类型: 所有对象都是真,null是假;
未定义: undefined为假,没有真(只要未定义,它就是假的,只要定义了,他就是真的,并且也就不是undefined);

1.5 访问关系
父节点

parentNode

兄弟节点

nextSibling(下一个兄弟,一定要是写在一起的,不然就是文档流)
nextElementSibling(可以理解为兼容,也就是,只获取元素兄弟,不是元素的东西,就给他过滤掉了,例如字符串、数值,都不是元素,就给他过滤掉了)
previousSibling(上一个兄弟)
previousElementSibling

子节点获取

firstChild 第一个子节点
firstElementChild
lastChild 最后一个子节点
lastElementChild
childNodes 获取所有子节点,并且返回的是一个伪数组,他是标准属性
children 重要返回所有的子元素节点,这个更好用,常用;
节点也分三种,通常,我们只需要用到元素节点
但是,我们也要清除,哪三种节点
节点.nodeType;//获取节点类型;
nodeType==1 元素节点 也是我们常用的
nodeTpye==2 属性节点
nodeType==3 文本节点

1.6 节点的操作

新建节点 插入节点 删除节点 克隆节点等等

1.7 创建节点

var li=documemt.createElement(‘li’);//在文档上创建一个节点,节点是一个li元素标签;

var body=document.getElementsByTagName('body'); 
//先,给谁添加节点,就要获取谁,现在是给body添加,就要获取body

var div=document.createElement('div');
//想要添加标签,就要有才能添加,不能无中生有,所以先创建一个标签节点

body[0].appendChild(div);
//给body添加子节点,子节点是div

for(var i=1;i<=5;i++){
var div=document.createElement('div');
    body[0].appendChild(div)
}
//循环创建添加多个节点

appendChild()是添加在父节点的最后面
如果我们想在前面添加节点,就要用:
insertBefore(插入的节点,参照节点) 在前面添加子节点
insertBefore(两个参数都必须要设置,如果不想设置,可以设置为null)
insertBefore(想要插入的节点,参照节点)

参照节点:你设置的谁,就在谁的前面插入,如果不设置,就添加在子元素的最后
怎么添加兄弟节点:
就是给当前元素的父亲添加子节点,就相当于给当前元素添加兄弟节点;

移出节点:removeChild()

克隆节点,就是复制节点
节点.cloneNode();
括号里面可以写参数,写true,就是深层复制,除了复制节点,还会复制子节点;
如果写false,那么只复制当前节点
如果不写参数,默认false

demo(一)发布微博

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            color:#333;font-family:Helvetica,Microsoft YaHei;
        }
        #box{
            width: 500px;
            font-size: 14px;
            border: 1px solid silver;
            margin: 100px auto;
        }
        button{
            font-size: 14px;
        }
        #text{
            margin: 20px 0 0 0;
        }
        #one{
            margin: 0 0 0 8px;
        }

        #two{
            width: 360px;
            margin: 0 auto 30px;
        }
        p{
            line-height: 26px;
            border-bottom: 1px dashed silver;
        }
        a{
            color: #E2526F;
            text-decoration: none;
            float: right;
        }
    </style>
    <div id="box">
        <div id="one">
            <span>微博发布</span>
            <textarea cols="50" rows="10" id="text"></textarea>
            <button id="btn">发布</button>
        </div>
        <div id="two"></div>
    </div>



<script>
    function $(id){
        return document.getElementById(id);
    }
    $("btn").onclick = function(){
        if($("text").value == ""){
            alert("请输入您要发表的内容");
            return false;
        }
        var p = document.createElement("p");
        p.innerHTML = $("text").value +'<a href="javascript:">删除</a>';
        $("text").value = "";

        var ps = $("two").children;   //  获取所有的 p
        $("two").insertBefore(p,ps[0]);   //  把新创建的 p 放在第一个

        var as = document.getElementsByTagName("a");   //  获取所有的a标签
        for(var i = 0;i<as.length;i++){
            as[i].onclick = function(){
                $("two").removeChild(this.parentNode);
            }
        }
    };
</script>

demo(二)节点轮播图

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            position: absolute;
        }
        li{
            width:1235px ;

        }
        input{
            width: 80px;
            height: 40px;
        }
        img{
            float: left;
        }
        .box{
            width: 247px;
            height: 350px;
            border: 1px solid pink;
            position: relative;
            /*overflow: hidden;*/
            margin: 0 auto;
        }
        #right{
            margin-left: 83px;
        }
        .btn{
            width: 248px;
            margin: 5px auto;
        }

    </style>
<div class="box">
    <ul id="ul">
        <li>![](images/image_1.png)</li>
        <li>![](images/image_2.png)</li>
        <li>![](images/image_3.png)</li>
        <li>![](images/image_4.png)</li>
        <li>![](images/image_5.png)</li>
    </ul>
</div>
<div class="btn">
    <input type="button" value="向左" id="left"/>
    <input type="button" value="向右" id="right"/>
</div>
<script>
    var ul = document.getElementById("ul");
    var btn = document.getElementsByTagName("input");
    var img = document.getElementsByTagName("img");
    var lis = document.getElementsByTagName("li");
    var time;
    btn[0].onclick = function(){
        clearInterval(time);
        ul.insertBefore(lis[lis.length-1],lis[0]);
        ul.style.left = "-247px";
        var pos = -247;
        time = setInterval(function(){
            if(pos<0){
                pos += 13;
                ul.style.left = pos +"px";
            }else{
                clearInterval(time);
            }
        },30)
    };

    btn[1].onclick = function(){
        clearInterval(time);
        var pos = 0;
        time = setInterval(function(){
            if(pos>-247){
                pos -= 13;
                ul.style.left = pos + "px";
            }else{
                clearInterval(time);
                ul.appendChild(lis[0]);
                ul.style.left = "0px";
            }
        },30)
    };
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 原文 链接 关注公众号获取更多资讯 一、基本类型介绍 1.1 Node类型 DOM1级定义了一个Node接口,该接...
    程序员poetry阅读 3,928评论 7 34
  • 本篇是基于《JavaScript高级程序设计(第3版)》DOM相关章节做的整理与归纳,概述了DOM的常见节点类型及...
    查查查查查查克阅读 2,477评论 2 7
  • 什么是DOM??? DOM(Document Object Model 文档对象模型)是针对HTML和XML文档的...
    荧惑3_3阅读 1,377评论 0 1
  • 文/不追猫 2016年过完春节我决定开始写小说,当时我辞职了,前一份的工作是工程管理,其实是什么都做,需要去工地,...
    不追猫阅读 1,841评论 6 9
  • 《慈母手中的线》 《圣经》有言:上帝无法降临在每个人身边,所以造就了母亲。 我们降生在这个世界上,带着母...
    谢存阅读 293评论 0 2