1 基础语法（对象）
1.1什么是对象
对象-和python中的对象一样，拥有对象属性和对象方法
1.2创建对象
创建对象字面量
对象字面量：{属性名1：属性值，属性名2：属性值}
注意：当属性值是普通值我们叫这个属性为对象属性；当属性值是函数时，这个属性就是对象方法
p1={name:'老王',age:10,eat:function(){Console.log('吃饭')}}
通过构造方法创建对象
声明构造方法（类似python声明类）-声明一个函数，使用函数名来模拟类名，在函数中通过this关键字来添加对象属性和对象方法
构造方法的函数名，首字母大写
this类似python中的self
通过构造方法创建对象
对象=new 构造方法（）
function Person(name='张三',age=18,sex='女'){
this.name=name
this.age=age
this.sex=sex
//添加对象方法
this.eat=function(food){
console.log(this.name+'在吃'+food)
}
//返回对象
return this
}
//创建person对象
p3=new Person()
p4=new Person('小明')
函数中this关键字
当调用函数的时候前面加关键字new，就是这个函数当成构造函数创建对象，函数中的this就是当前对象；
直接调用函数的时候，函数中的this是window对象
1.3使用对象属性
a.对象.属性
b.对象[属性名]
var t='age'
p5=new Person('小花',20,'女')
console.log(p5.name,p5['sex'],p5[t])
1.4修改对象属性的值
属性存在的时候是修改，不存在的时候就是添加
对象.属性=值
对象[属性名]=值
给对象添加属性只作用于一个对象，不影响其他对象
构造方法名（类名）.prototype.属性=值 给指定构造方法创建的所有的对象都添加指定的属性
Person.prototype.aaa='123'
console.log(p5.aaa)
创建学生类，并对其按分数进行排序
function Student(name,age,score){
this.name=name
this.age=age
this.score=score
return this
}
s1=new Student('小明',18,88)
s2=new Student('小王',15,98)
s3=new Student('小法',16,77)
students=[s1,s2,s3]
//sort方法排序后，原数组会改变，也会产生新的数组
new_students=students.sort(function FUN(a,b){
return a.score-b.score})
console.log(students)
2 DOM获取节点
2.1什么是DOM（文档对象模型）
DOM是document object mode的缩写
DOM模型就是一个树结构，里面是由各种节点组成
2.2document对象
document对象是js中写好的一个对象，代表的是网页内容结构，代表的是网页的内容结构
通过document对象可以拿到网页中所有内容对应的节点
2.3获取节点（在js中获取网页中的标签）
2.3.1通过标签的id获取
通过标签的id值来获取指定的标签
document.getElementById(id值) -返回节点对象
如果html中同样的id对应的标签有多个，只能取一个。所以一般在使用id的时候id要唯一
var pNode=document.getElementById('p1')
console.log(pNode)
2.3.2通过标签名来获取
document.getElementsByTagName(标签名) - 返回的是一个数组，数组中是节点
var aNodeArray=document.getElementsByTagName('a')
console.log(aNodeArray)
for(x in aNodeArray){
拿到aNodeArray对象中的所有属性，这儿除了a标签以外还有length，item等其他非标签对象
aNode=aNodeArray[x]
console.log(x,aNode)
只对标签进行操作
aNode=aNodeArray[x]
if(typeof(aNode)=='object'){
console.log(aNode,'是标签')
}
}
2.3.3通过类名来获取
document.getElementsByClassName(类名)-获取所有class属性值是指定的值的标签，返回的是一个数组对象
var c1NodeArray=document.getElementsByClassName('c1')
console.log(c1NodeArray)
2.3.4通过name属性的值获取（了解）
console.log(document.getElementsByName('username'))- 返回一个节点数组对象
console.log(document.getElementsByName('username'))
3DOM间接获取节点
3.1获取父节点
子节点.parentElement - 获取子节点对应的父节点
<body>
<div id="box1">
box1
<div id="box11">div11</div>
<div id="box12">div12</div>
<div id="box13">div13</div>
</div>
</body>
var box11Node=document.getElementById('box11') //获取节点
var box1Node=box11Node.parentElement //获取父节点法一
var box1Node2=box11Node.parentNode //获取父节点法二
console.log(box1Node,box1Node2)
3.2获取子节点
a.获取所有的子节点
父节点.children-返回一个数组对象
var allChild=box1Node.children
console.log(allChild)
父节点.childNodes - 获取父节点下所有的内容（包括子节点和文本）
var allChird2=box1Node.childNodes
console.log(allChird2)
b.获取第一个字节点
父节点.firstElementChild
var childNode=box1Node.firstElementChild
console.log(childNode)
c.获取最后一个子节点
父节点.lastElementChild
var childNode2=box1Node.lastElementChild
console.log(childNode2)
4创建添加和删除节点
获取节点
var pNode=document.getElementById('p1')
获取标签内容
var content=pNode.innerHTML
修改标签内容
pNode.innerHTML='我不是段落'
获取标签样式中的文字颜色
var pColor = pNode.style.color;
修改标签样式
pNode.style.color = 'salmon'
pNode.style.fontSize = '30px'
4.1 创建节点
document.createElement(标签名) - 创建指定标签节点（创建后不会自己添加到浏览器上）
标签节点就是标签对象，可以通过document去网页中获取到，也可以自己创建
a.节点属性
标签对象中有相应的标签相关的属性，可以通过标签节点获取或者修改这些属性值
例如，a标签节点有：href属性，id属性，className属性，style属性等
img标签节点有：src属性，id属性，style属性，alt属性，title属性等
b.innerHTML和innerText属性
innerHTML-双标签的标签内容（包含其他标签）
innerText-双标签的标签内容（侧重只有文字）
创建一个div标签对象
var divNode=document.createElement('div')
divNode.innerText='写的都是什么鬼玩意儿'
创建一个img标签对象
var imgNode=document.createElement('img')
imgNode.src='img/a1.jpg'
4.2添加节点
a.在指定的标签中的最后添加一个节点
父节点.appendChild(需要添加的节点)
var div1Node=document.getElementById('div1')
div1Node.appendChild(divNode)
创建并添加一个节点的函数
function addDiv(){
var divNode=document.createElement('div')
div1Node.innerText='111'
div1Node.appendChild(divNode)
}
b.在指定的节点前插入一个节点
父节点.insertBefore(新节点，指定节点) -- 在父节点中的指定节点前插入指定的节点
div1Node.insertBefore(imgNode,div1Node.firstChild)
4.3删除节点
父节点.removeChild(子节点) - 删除父节点中指定的子节点
div1Node.removeChild(imgNode)
div1Node.removeChild(div1Node.lastChild)
4.4清空标签（删除所有的子标签）
删除父标签中所有的子节点
div1Node.innerHTML=null
节点.remove()-将节点从浏览器中删除
div1Node.remove()
删除一个标签的函数
function close1(){
var adNode=document.getElementById('ad')
通过父标签删除
adNode.parentNode.removeChild(adNode)
直接删除
adNode.remove()
将要删除的标签隐藏（未删除）
adNode.style.display='none'
}
产生随机数
Math.random()-产生随机数0~1（小数）
parseInt()-转换成整数
parseFloat()-转换成小数
网友评论