day24-课堂总结

基础语法(对象)

1.什么是对象 - 和python中的对象一样，拥有属性和方法
2.创建对象
a.创建对象字面量
对象的字面量:{属性名1:属性值1，属性名2:属性值2}
注意：当属性是普通值，我们叫这个属性为对象属性，当属性值是函数这个属性就是对象方法
例如：p1 = {name: '周海龙',age: 18, eat:function(food){
console.log(name + '在吃' + food)
}}
b.通过构造方法来创建对象
声明构造方法(类似python声明类) - 声明一个函数，使用函数名来作为类名
在函数中通过this关键字来添加对象属性和对象方法

• 构造方法的函数名，首字母大写
  this类似python中的self
  通过构造方法创建对象
• 对象=new 构造方法()

function  Person(name = '张三',age = 10, sex = '男'){
        this.name = name
        this.age = age
        this.sex =sex
        添加对象方法
        this.eat = function(food){
                console.log(this.name + '再吃' + food)
}
         返回对象
         return  this
}

//sort方法排序后，原数组会改变，也会产生新的数组
    console.log(student.sort(function(a,b){
        return a.score - b.score
    }))

DOM获取节点

1.什么是DOM(文档对象模型)
DOM是document-object-model
DOM模型就是一个树结构，里面是由各种节点组成
2.document对象 - js写好的一个对象，代表的是网页内容结构
通过document对象可以拿到网页中所有内容对应的节点
3.获取节点(在js中获取网页中的标签)

节点操作

1.直接获取节点
a.通过标签的id值来获取指定的标签
document.getElementById(id值) - 返回节点对象
如果html中同样的id对应的标签有多个，只会取一个，所以一般在使用id的时候，id要唯一
b.通过标签名来取指定的标签
document.getElementsTagName(标签名) - 返回的是一个数组对象，数组中是节点

var aNode = document.getElementsByTagName('a')
     for(x in aNode){
        //拿到aNode对象中的所有属性，这儿除了a标签以外还有length，item
        //等其他非标签
        aNode1 = aNode[x]
        //只对标签进行操作
        if(typeof(aNode1) == 'object'){
            console.log(aNode,'是标签')
        }
     }

c.通过类名来获取指定的标签
document.getElementsByName(类名) - 获取所有class属性值是指定的值的标签，返回一个数组对象

间接获取节点

1.获取父节点
子节点.parentElement - 获取子节点对应的父节点
2.获取子节点
a.获取所有的子节点
父节点.children - 返回一个数组对象
父节点.childNodes - 获取父节点下所有的内容(包括子节点和文本)
b.获取第一个子节点
父节点.firstElementChild
c获取最后一个节点
父节点.lastElementChild

DOM创建添加和删除节点

获取标签内容
标签节点.innerHTML
标签节点.innertext
修改标签内容
标签节点.innerHTML = '修改的内容'
获取标签样式的文字颜色
标签节点.style.color

创建节点

document.createElement(标签名) - 创建指定标签节点（创建后不会自动添加到浏览器上）
a.节点属性
创建节点就是标签对象，可以通过document去网页中获取到，也可以自己创建，标签对象中有相关属性，可以通过标签节点获取或者修改这些属性
例如：a标签节点有：href属性，id属性，className属性，style属性等等
img标签节点有：src属性，id属性，style属性，alt属性，title属性
b innerHTML和innertext属性
innerHTML - 双标签的标签内容(包含其他标签)
innertext - 双标签的标签内容(侧重只有内容)
2.添加节点
a.在指定的标签中的最后添加一个节点
父节点.appendChild(需要添加的节点)

var div1Node = document.getElementById('div1')
        function btn(){
            var divNode = document.createElement('div')
            divNode.innerText = '我是box1'
            div1Node.appendChild(divNode)   
        }

b.在指定的节点前插入一个节点
父节点.insertBefore(新节点,指定节点) ---在父节点中的指定节点前插入新节点
3.删除节点
父节点.removeChild(子节点) - 删除父节点中指定的子节点
标签节点.innerHTML = null - 清空标签(删除所有的子标签)
//隐藏该节点
div1Node.style.display = 'none'
节点.remove() - 将节点从浏览器中删除