Web APIs 第三天 - DOM- 节点操作

bg.png

一. 节点操作

1. DOM节点

DOM节点:DOM树里每一个内容都称之为节点
节点类型 :

  • 元素节点: 所有标签 body div ...
  • 属性节点: 所有属性 href title...
  • 文本节点: 所有文本

2.查找节点

  • 查找父节点
    语法: 子元素.parentNode
  • 查找子节点
    语法: 父元素.children 查找所有子元素 返回的是伪数组
    父元素.childNodes 获得所有子节点、包括文本节点(空格、换行)、注释节点等
  • 查找兄弟节点
    上一个兄弟节点: 元素.previousElementSibling
    下一个兄弟节点: 元素.nextElementSibling

3.增加节点

创建节点:
语法: document.createElement('标签名')
追加节点:

  • 语法:父元素.appendChild(要添加的元素)
    作用:将元素放到父元素的里面的最后面
  • 语法:父元素.insertBefore(要添加的元素, 在谁前面)
    作用:将节点添加到指定的节点前面
    第二个参数为 null 或 undefined 效果等同于 appendChild 放在最后
    创建的节点不会在页面中显示,创建后还要追加节点才会在页面中显示

4.克隆节点:

语法:元素.cloneNode(布尔值)
参数 布尔值
true 会克隆节点自身,后代节点会克隆的
false 默认值 只会克隆节点自身,后代节点不会克隆的
克隆节点要添加到页面中才能看到

5.删除节点

要删除元素必须通过父元素删除
语法: 父节点.removeChild(要删除的元素)

  • 如不存在父子关系则删除不成功
  • 删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点

二.时间对象

1.创建时间对象

语法: new Date()
let date = new Date() 获得当前时间
let date2 = new Date('指定时间') 获得指定时间

2.时间对象方法

date.getFullYear() 获得年份
date.getMonth() + 1 获得月份(结果0-11 0 表示1月 11表示12月 所有要加一才是月份)
date.getDate() 获得日
date.getHours() 时
date.getMinutes() 分
date.getSeconds() 秒
date.getDay() 星期 (结果0-6 0表示星期天 )


1.png
<script>
        // 时间对象方法

        // 步骤:
        // 1. 先创建时间对象
        // 2. 时间对象 去调用方法得到年月日
        let date = new Date()
        console.log(date)

        // 年
        console.log( date.getFullYear())

        // 月  结果0-11  0 表示 1 月  11 表示 12 月
        console.log(date.getMonth() + 1)

        // 日
        console.log(date.getDate())

        // 时
        console.log(date.getHours())

        // 分
        console.log(date.getMinutes())

        // 秒
        console.log(date.getSeconds())
        
        // 星期 结果 0 - 6  0 表示星期天  6 表示星期六
        console.log(date.getDay())


    </script>

3.秒数转时分秒的公式

h = parseInt(time / 60 / 60 % 24)
m = parseInt(time / 60 % 60)
s = parseInt(time % 60)

4.时间戳

时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
获取方式:

  • 方式1:getTime()
  • 方式2:+new Date() 括号里面不写,是获取当前时间的时间戳 括号里面写指定时间,是获取指定时间的时间戳
  • 方式3:Date.now() // 只能获取当前时间的时间戳

至于未来会怎样,要走下去才知道,反正路还很长,天总会亮。

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

推荐阅读更多精彩内容