webApi-DOM-02

144 阅读2分钟

01-DOM节点:网页一切内容皆节点

1.1-DOM节点介绍

  • 1.什么是节点:在HTML文档中,一切皆节点(HTML文档本身、标签、属性、注释内容、文本)
  • 2.什么是元素:元素在HTML中叫做标签,在JS的dom对象中称为元素(可以理解为标签的面向对象的叫法)
  • 3.HTML标签属于节点的一种,叫做元素节点
  • 4.节点三要素:
    • 节点类型:标签、属性、注释、文本
    • 节点名称:p、div、class(标签名)
    • 节点的值:one(属性的值)
  • 在JavaScript中,document这个对象大家一定很熟悉,哪怕是刚刚开始学习的新人,也会很快接触到这个对象。而document对象不仅仅是一个普通的JavaScript内置对象,它还是一个巨大API的核心对象,这个巨大的API就是DOM(Document Object Model),它将文档的内容呈现在JS面前,并赋予了JS操作文档的能力。
    • DOM树体现着HTML页面的层级结构,学习中经常提到的父元素子元素的说法也是建立在树这种数据结构的基础之上的,而DOM文档树则包含文档中所有内容。

image.png

1.2-查找节点:子节点

1.获取子节点 :  父元素.childNodes
2.获取子元素节点(重点):   父元素.children

1.3-查找节点:兄弟节点

1.获取上一个元素节点 : 元素.previousElementSibling
2.获取下一个元素节点 : 元素.nextElementSibling

1.4-查找节点:父节点

 子元素.parentNode

1.5-新增节点

1.内存中创建一个空节点:  document.createElement('标签名')
2.设置节点内容
3.追加到页面
     追加到最后面    :   父元素.appendChild(子元素)
     追加指定元素前面 :  父元素.insertBefore(子元素,哪个元素的前面)

1.6-克隆节点

元素.cloneNode(布尔类型)
    默认false:不克隆后代节点
    true:克隆后代节点

1.7-删除节点

父元素.removeChild(子元素) 

02-内置对象Date: 日期对象

    <script>
        //1.创建日期对象    
        let d = new Date()
        console.log(d)

        //2.转换日期格式
        console.log( d.toLocaleString() )
        console.log( d.toLocaleDateString() )
        console.log( d.toLocaleTimeString() )

        //3.获取 年月日时分秒
        console.log( d.getFullYear() )
        //范围下标 0-11 对应 1-12月
        console.log( d.getMonth() )
        console.log( d.getDate() )
        //星期下标 0-6 对应 周日-周六
        console.log( d.getDay() )
        console.log( d.getHours() )
        console.log( d.getMinutes() )
        console.log( d.getSeconds() )

        //4.获取时间戳  : 1970110秒 伦敦时间 -> 现在时间总毫秒数
        //时间戳作用 : 解决浏览器时区兼容性    UTC时区:全球时区   GMT时区:东8区
        console.log( Date.now() )
        console.log( +new Date() )
        console.log( new Date().getTime() )
        
    </script>

03-定时器

1-setInterval永久定时器

 1.定时器作用 : 一段代码 间隔时间 重复执行
 2.定时器语法 :
   2.1 setInterval : 永久定时器。 一旦开启,永久重复执行,只能手动
     (1)开启:  let timeID = setInterval( 回调函数 , 间隔时间 )
     (2)清除:  clearInterval( timeID )
     
/*
* @description: 开启定时器
* @param {function} 一段代码
  * 回调函数 : 如果一个函数的参数也是函数,这个参数函数就叫做回调函数   
* @param {number} 间隔时间  单位毫秒  1s = 1000ms
* @return: 定时器id
  * 一个页面可以开启很多定时器,浏览器为了更好管理这些定时器。会给每一个定时器一个编号。称之为定时器id   
*/

2-setTimeout一次定时器

setTimeout : 一次定时器。一旦开启,间隔时间只会执行一次,完成后自动清除。
(1)开启:  let timeID = setTimeout( 回调函数 , 间隔时间 )
(2)清除:  clearTimeout( timeID )