一.WebAPIs:

作用:使用js操作浏览器和html
分类:DOM(文档对象模型:操作浏览器的网页内容),BOM(浏览器对象模型)

二.DOM树:

HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
本质：DOM树本质是一个对象

三. DOM节点:

节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
【根节点】特指 html 标签。

document:

document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。

<script>
  // document 是内置的对象
  // console.log(typeof document);

  // 1. 通过 document 获取根节点
  console.log(document.documentElement); // 对应 html 标签

  // 2. 通过 document 节取 body 节点
  console.log(document.body); // 对应 body 标签

  // 3. 通过 document.write 方法向网页输出内容
  document.write('Hello World!');
</script>

四. 获取DOM元素:

querySelector 获得第一个元素

document.querySelect('css选择器')

querySelectorAll 获得多个元素集合返回伪数组

document.querySelectAll('css选择器')

五.操作元素内容:

innerText (文本中包含的标签不会被解析)
innerHTML(文本包含的标签可以被解析)

intro.innerHTML = '嗨~ 我叫韩梅梅！' intro.innerHTML = '
嗨~ 我叫韩梅梅！
'

常用属性的修改: 对象.属性 = 值
修改元素样式: 对象.style = 值
控制样式通过classList(可以解决className带来覆盖的问题):

元素css的添加:对象.classList.add('css标签')
元素css的删除: 对象.classList.remove('css标签')
元素css的切换:对象. class.List.toggle('css标签')

操作表单元素属性:

input.value = 值(改变value属性值)
表单checked属性要么是true 要么是false
button按钮的禁用(disable)

1.获取input 标签的 value属性值 // 2,dom对象.value | dom对象.value = 值 const input = document.querySelector('input') input.value = '123456'

 // 就是通过js去控制 表单标签的checked 属性 值对于js来说 是布尔值 如果为true 表示打勾  如果为 false 不打勾
        const input = document.querySelector('input')
        input.checked = true
        // input.checked = false

 // js控制button 标签的disabled 属性 true 禁用 false 表示不禁用
        const button = document.querySelector('button')
        // button.disabled = false
        button.disabled = true

六.间歇函数(定时器):

开启定时器:setInterval(匿名函数 | 具体函数,间隔时间)
关闭定时器: clearInterval(变量名)
注意:定时器返回的是一个id ,匿名函数没有括号

//    setInterval((匿名函数 |具名函数),间歇时间)
        setInterval(function(){
             document.write(`哈哈哈哈哈哈哈哈<br>`)
        },1000)
        

        setInterval(fn,1000)
        function fn(){
            console.log('吴彦祖');
        }

WebAPIs(DOM获取 属性操作)

一.WebAPIs:

二.DOM树:

三. DOM节点:

document:

四. 获取DOM元素:

五.操作元素内容:

嗨~ 我叫韩梅梅！

六.间歇函数(定时器):

WebAPIs(DOM获取属性操作)