JavaScript的对象、DOM知识点

对象

对象由属性和方法组成。

多个属性、方法之间用逗号隔开，赋值时大括号里面用冒号 : ，外面用等号 = 。

        let 对象名 = {
            属性名:属性值
            方法名:函数
        }
        let people = {
            'goods-name': '天王'，
            uname: '田祥',
            age: 18,
            gender: '男'，
            sing: function() {
                console.log('恭喜发财');
            }
        }

1.属性、方法

查：

(1)对象名.属性名

    console.log(people.uname)//田祥

(2)对象名[‘属性名']

    console.log(people['goods-name'])//可以防止-被译为减号

改：对象名.属性名 = 新值

    people.uname = '刘德华'
    console.log(people.uname);//刘德华

增：对象名.新属性名 = 新值

    people.identity = '明星'
    console.log(people);//{uname: '刘德华', age: 18, gender: '男', identity: '明星'}

删（了解）：delete 对象名.属性名

    delete people.age
    console.log(people);//{uname: '刘德华', gender: '男', identity: '明星'}

方法调用：对象名.方法名()

    people.sing()

2.遍历对象

对象是无序的，不能同数组的遍历方法，用for in。

        for(let k in people) {
            console.log(people[k]);
        }

for in中的k是字符型的属性名（数组为字符型的下表，不适合数组），用对象名[‘属性名']的调用方式。

3.内置对象

null

null类似let 对象名 = {}
因此可以用let 对象名 = null 表示不存在的对象
typeof null 结果为object

Math

Math对象有：

random: 生成0-1之间的随机数(包含0不包括1) ceil: 向上取整 floor: 向下取整 max:找最大数 min: 找最小数 pow: 幂运算 abs: 绝对值等。

详细内容：数学 - JavaScript |MDN网络 (mozilla.org)

// ceil 天花板向上取整 
console.log(Math.ceil(1.1)) //.2            
// floor 地板向下取整         
console.log(Math.floor(1.9)) // 1   
// 四舍五入 round           
console.log(Math.round(1.5)) // 2   
console.log(Math.round(-1.1)) // -1 
console.log(Math.round(-1.5)) // -1 负数五入变大

Math.round不同于显性转换中的取整函数parselnt(数据)，数据不能为字符串。

随机函数

Math.random()随机数函数，返回一个0-1之间，并且包括0不包括1的随机小数[0,1)。 生成N-M（包括M）之间的随机数：Math.floor(Math.random()* (M-N+1))+N

应用：

随机获取数组里的值：

let arr = ['red', 'green', 'blue']
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random])

猜数字：

        let random = Math.floor((Math.random() * 10) + 1)
        for (let i = 1; ; i++) {
            let number = +prompt('请输入数字：')
            if (i === 4) {
                alert('你的次数已用完')
                break
            }
            if (number > random) {
                alert('你猜大了,还有' + (3 - i) + '次机会')
            }
            else if (number < random) {
                alert('你猜小了,还有' + (3 - i) + '次机会')
            }
            else {
                alert('恭喜你猜对了')
                break
            }
        }//也可以用布尔型来判断

DOM

DOM是文档对象模型，浏览器提供与用户交互的功能。

1、变量声明

优先选择const，其次let，var太老旧一般不用。

const 声明的值不能更改，再赋个同样的值也不行，而且const声明变量的时候需要里面进行初始化，但是对于引用数据类型，const声明的变量，里面存的不是值，不是值，不是值，是地址。

所以以下用const是错误的：

const names =[]
names = [1,2,3]
​
const obj = {} obj={
uname: 'pink老师'

DOM树

将HTML文档以树状结构直观的表现出来，称之为文档树或 DOM 树（描述网页内容关系的名词）。 作用：文档树直观的体现了标签与标签之间的关系

DOM对象（重点）

DOM对象: 浏览器根据html标签生成的JS对象。 所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签身上。

在HTML里的标签，在JS的DOM里是对象。

2、获取DOM元素

通过CSS选择器获取（重点）

1.选择匹配的第一个元素语法:

document.querySelector('css选择器')

一定不要忘了加单引号’‘，只能选择一个元素（第一个），可以直接修改。

如果没有匹配到，则返回null。

2.选择匹配的多个元素语法:

document.querySelectorAll('css选择器')
例：document.querySelectorAll('ul li')

返回值:

得到的是一个伪数组: 有长度有索引号的数组，但是没有pop() 、push()等数组方法

想要得到和修改里面的每一个对象，则需要遍历(for)的方式获得。

其他获取DOM元素方法(了解)

// 根据id获取一个元素
document.getElementById('nav')
//根据 标签获取一类元素获取页面所有
div document.getElementsByTagName('div')
// 根据 类名获取元素获取页面所有类名为 w的 
document.getElementsByClassName('W')

3、修改元素内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象，就是操作对象使用的点语法。

元素innerText属性

将文本内容添加/更新到任意标签位置显示纯文本,不解析标签。

const info = document.querySelector('.info')// 获取标签内部的文字
console.log(info.innerText)// 添加
info.innerText ='刘德华'//修改标签内部文字内容

元素innerHTML属性

将文本内容添加/更新到任意标签位置会解析标签，多标签建议使用模板字符。

const info = document.querySelector('.info')// 获取标签内部的文字
console.log(info.innerHTML)// 添加
info.innerHTML ='<strong>刘德华</strong>'//修改标签内部文字内容

按要求书写innerText、innerHTML注意大小写。

4、修改元素属性

1.修改常用属性

用修改属性的方法修改标签元素属性，常见的属性如：href、title、src等，语法如：对象.属性=值

// 1.获取图片元素
const img = document.querySelector('img' )
// 2.修改图片对象的属性对象.属性=值
img.src = ' ' 
img.title = ' '

2.修改样式属性

通过style修改

1.设置/修改元素样式属性通过style属性引出来。

2.如果需要修改一个div盒子的样式，比如padding-left写成paddingLeft（小驼峰命名法）。

3.我们是样式属性，一定别忘记，大部分数字后面都需要加单位。

4.生成的是行内样式权重比较高。

//修改样式属性 对象.style.样式属性 =‘值’别忘了跟单位 
box.style.width = '300px'
// 多组单词的采取小驼峰命名法
box.style.backgroundColor = 'hotpink' 
box.style.border = '2px solid blue'
box. style.borderTqp = '2px solid red'

通过className修改

className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名。

添加类名 class 是个关键字我们用className 
div.className = 'box'

通过classList修改（常用）

1. 追加类add()类名不加点，并且是字符串。

2. 删除类 remove()类名不加点，并且是字符串。

3. 切换类 toggle() 类名不加点，类有就删掉，没有就加上，不影响以前的类名。

box.classList.add('active')
box.classList.remove( 'box')
box.classList.toggle('active')

顺带一提，多类名情况下属性冲突是跟据 style表中顺序靠后的，不是根据在body中。

3.修改表单属性

获取: DOM对象.属性名 设置:DOM对象.属性名=新值

表单.value ='用户名'
表单.type = 'password'

innerHTML/innerText一般都不能获得标签的内容，用表单.value方式（button中的内容只能用innerHTML获取）。

表单属性,一律使用布尔值表示如果为true 代表添加了该属性 如果是false 代表移除了该属性。

const ipt = document.querySelector('input' )// 获取
console.log(ipt.checked) // false   只接受布尔值  
ipt.checked =true
ipt.checked = 'true' // 字符串为true会选中，不提倡有隐式转换
const button = document.querySelector('button' )// 获取
console.log(button.disabled) // 默认false不禁用 
button.disabled = true // 禁用按钮

4.自定义属性

自定义属性:

1. 在html5中推出来了专门的data-自定义属性

2. 在标签上一律以data-开头

3. 在DOM对象上一律以dataset对象方式获取

<div class="box"data-id="10">盒子</div>   
<script>
const box = document.querySelector('.box') 
console.log(box.dataset.id)
</script>

5、定时器-间歇函数

定时器函数开启：setInterval(函数名，时间)

调用函数只写函数名，不用写括号()，新建函数时写全。

定时器函数关闭：

let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)

案例：

<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>    
const btn = document.querySelector('.btn')
let i = 5
let n = setInterval(function () {
btn.innerHTML =`我已经阅读用户协议(${i})`
i--
if (i === 0){
clearInterval(n)
btn.disabled = false
btn.innerHTML ='同意' 
}
},1000)
</scrip>