(26)day6-web前端
6.1 基础语法（对象）
<script type="text/javascript">
1.什么是对象：js中没有类，但是有对象；和python中的对象一样，拥有对象属性和方法。
2.创建对象
对象字面量:{属性名：属性值，。。。}
注意：当属性值是普通值我们叫这个属性为对象属性；当属性值是函数，这个属性就是对象方法。
第一种方式:
p1 = {
name:'小明',
age:10,
eat:function(){
console.log('吃饭！')
}
}
p2 = {
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('小王八')
//生成person对象
console.log(p3,p4,p3.age,p4.age)
p4.eat('苹果')
//调用函数，获取返回值
win1 = Person()
//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
//生成的是window对象，指的是当前浏览器窗口
console.log(win1)
win1.alert('我是window')
函数中关键字:
当创建函数时前面加new，就是将此函数当作对象，函数中的this就是当前对象
直接调用函数时，函数中的this是window对象。
3.使用对象属性
a.对象.属性
b.对象[属性名]
c.
var t = 'age'
p5 = new Person('小王八蛋',999,'女')
console.log(p5.name)
console.log(p5['name'],p5[t])
p5.eat('面条')
4.修改对象属性值
属性存在时是修改，不存在时是添加
对象.属性=值
对象[属性名]=值
//属性存在时
p5.name = '修改小王八蛋'
console.log(p5)
//属性不存在时，仅对当前对象有效
p5.new_shuxing = '我是p5本来不存在的属性'
console.log(p5)
//给对象添加属性仅作用于一个对象，不影响其它对象。
console.log(p4)
//构造方法名(类名).prototype.属性 = 值 ：给指定构造方法创建的所有对象都添加属性。
Person.prototype.tianjia_shuxing = '我是给所有对象添加属性'
console.log(p4.tianjia_shuxing)
//给系统类添加对象方法
String.prototype.tianjia_fangfa = function(x){
console.log('我是给所有对象添加方法')
return this[x]
}
console.log('添加成功啦'.tianjia_fangfa(3)) // 功
console.log('添加成功啦'[3]) // 功
//练习：用一个数组保存多个学生对象，要求学生对象中有姓名，成绩和年龄，最后对所有学生按成绩进行排序
function Student(name,score,age){
this.name = name
this.score = score
this.age = age
}
s1 = new Student('s1',88,12)
s2 = new Student('s2',98,13)
s3 = new Student('s3',78,14)
s_arr = [s1,s2,s3]
//sort方法排序后，原数组会改变，也会产生新的数组
new_s = s_arr.sort(function(a,b){
return a.score - b.score
})
console.log(new_s)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
6.2 DOM获取节点
1.什么是DOM(文档对象模型)
DOM是document object mode的缩写
DOM模型就是一个树结构，里面由各种节点组成。
2.document对象：js写好的对象，代表的是网页内容结构
通过document对象可以拿到网页中所有内容对应的节点。
3.获取节点（在js中获取网页中的标签）
<script type="text/javascript">
节点操作
1.直接获取节点
a.通过标签的id值来获取指定的标签
document.getElementById(id值)：返回节点对象
如果html中同样的id对应的标签有多个，只能取一个，所以一般在使用id的时候，id要唯一。
//注意书写的位置
var pNode = document.getElementById('p1')
// null
console.log(pNode)
b.通过标签名来获取指定的标签:返回的是一个数组，数组中元素是每个标签节点
document.getElementsByTagName(标签名)
var aNodeArray = document.getElementsByTagName('a')
for (x in aNodeArray) {
console.log(x)
// null
}
c.通过类名获取指定标签
document.getElementsByClassName(类名)：获取所有class属性值是指定值的标签，返回的是一个数组
var c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
console.log(c1NodeArray.length)
d.通过name属性值获取指定标签
document.getElementsByName()
2.间接获取节点
a.获取父节点
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id='p1' class='c1'>我是段落1</p>
<p id='p2' class='c1'>我是段落2</p>
<p id='p2' class='c1'>我是段落3</p>
<a href="img/DOM模型.png">DOM模型</a>
<a href="">我是第2个a标签</a>
</body>
</html>
<script type="text/javascript">
var pNode = document.getElementById('p1')
// <p id='p1'>我是段落1</p>
console.log(pNode)
var aNodeArray = document.getElementsByTagName('a')
for (x in aNodeArray) {
//拿到aNodeArray对象中所有的属性，这儿除了a标签以外还有length，item等其它非标签对象。
aNode = aNodeArray[x]
//只获取a标签
//aNode.appendChild(pNode)
if(typeof(aNode)=='object'){
console.log(aNode,'是标签。')
}
}
//c.通过类名获取指定标签
/*
* document.getElementsByClassName(类名)：获取所有class属性值是指定值的标签，返回的是一个数组
*/
var c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray) // HTMLCollection(3) [p#p1.c1, p#p2.c1, p#p2.c1, p1: p#p1.c1, p2: p#p2.c1]
console.log(c1NodeArray.length) // 3
</script>
6.3 DOM间接获取节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box1">
<div id="box11">
div11
</div>
<div id="box12">
div12
</div>
<div id="box13">
div13
</div>
</div>
</body>
</html>
<script type="text/javascript">
var box11Node = document.getAnonymousElementById('box11')
1.获取子节点的父节点:子节点.parentElement
var box1Node = box11Node.parentElement
2获取子节点
a.获取所有子节点
父节点.children：返回一个子节点数组
var allchild = box1Node.children
父节点.childrens：获取父节点下所有的内容，包括子节点和文本，一般不用此方法
var allchild2 = box1Node.childrens
b.获取第一个子节点
父节点.firstElementChild 获取父节点下第一个子节点
父节点.lastElementChild 获取父节点下最后一个子节点
var childNode = box1Node.firstElementChild
</script>
6.4DOM创建添加删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1" class="cp1" style="color:red;">我是段落</p>
<div id="div1" style="height: 400px;background-color: red;">
<div id="div11" style="width:50%;height: 60px;background-color: yellow;">
div11
</div>
</div>
<button onclick="addDiv()">添加</button>
</body>
</html>
<script type="text/javascript">
var pNode = document.getElementById('p1');
//获取标签内容
var content = pNode.innerHTML;
//修改标签内容
pNode.innerHTML = '我不是段落'
//获取标签样式中的文字颜色
var pColor = pNode.style.color
//修改标签样式
pNode.style.color = 'blue'
pNode.style.fontSize = '50px'
1.创建节点:document.createElement(标签名)：创建指定标签节点（标签对象）；想要显示需要添加到网页中。否则不会显示。
a.节点属性
标签节点就是标签对象，可以通过document去网页中获取到，也可以自己创建。
标签对象中有相应的标签相关的属性，可以通过标签节点获取和修改这些属性值。
例如：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/thumb-1.jpg'
2.添加节点
a.在指定的标签最后添加一个节点
父节点.appendChild(需要添加的节点)
var div1Node = document.getElementById('div1')
function addDiv(){
var divNode = document.createElement('div')
divNode.innerText = '我是一个纯文本内容'
div1Node.appendChild(divNode)
console.log('121')
}
b.在指定的节点前插入一个节点
父节点.insertBefore(新节点，制定节点)：在父标签的制定节点前插入新节点
div1Node.insertBefore(imgNode,div1Node.firstChild)
3.删除节点
父节点.removeChild(子节点)：删除父节点中指定的子节点
// div1Node.removeChild(imgNode)
//清空节点内容
// div1Node.innerHTML = null
//节点.remove():将节点从浏览器中删除
</script>
#6.5 删除广告
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#hide{
display: none;
}
#ad{
height: 100px;
background-color: red;
}
#ad img{
width: 100%;
height: 100%;
}
#ad #close{
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: lightgray;
color: white;
text-align: center;
line-height: 30px;
}
#div2{
height: 400px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="ad">
<img src="img/picture-1.jpg"/>
<div id="close" onclick="myClose()">
X
</div>
</div>
<div id="div2">
</div>
<!--js-->
<script type="text/javascript">
function myClose(){
var adNode = document.getElementById('ad')
// adNode.parentNode.removeChild(adNode)
//直接移出指定标签
// adNode.remove()
//让指定标签隐藏，下次修改它时会出现
// adNode.style.display = 'none'
//设置隐藏时，可以更改该标签id为hide，自己写个hide的css
adNode.id = 'hide'
}
</script>
</body>
</html>
