1.对象
1.什么是对象
和Python中的对象一样，有对象属性和对象方法
2.创建对象
- a.创建对象字面量
对象字面量: {属性名1:属性值1, 属性名2:属性值1}
注意：当属性值是普通值我们叫这个属性为对象属性；当属性值是函数这个属性就是对象方法
p1 = {
name:'余婷',
age:10,
eat:function(){
console.log('吃饭!')
}
}
p2 = {
name:'小明',
age:18,
eat:function(){
console.log('吃饭!')
}
}
- b.通过构造方法创建对象
声明构造方法（类似python声明类）
声明一个函数，使用函数名来作为类名，在函数中通过this关键字来添加对象属性和对象方法
构造方法的函数名，首字母大写
this类似python中的self
通过构造方法创建对象
对象 = new 构造方法()
function Person(name1='张三', age1=18, sex1='男'){
//添加对象属性
this.name = name1
this.age = age1
this.sex = sex1
//添加对象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
//返回对象
return this
}
//创建Person的对象
p3 = new Person()
p4 = new Person('小明')
//使用对象属性和方法
console.log(p3, p4, p3===p4, p3.age, p4.name)
p4.eat('苹果')
//调用函数，获取返回值
win1 = Person()
console.log(win1)
win1.alert('我是window')
- c.函数中this关键字
当调用函数的时候前面加关键字new,就是这个函数当成构造函数创建对象，函数中的this就是当前对象;
直接调用函数的时候，函数中的this是window对象 - a. 对象.属性 - p5.name
- b. 对象[属性名]
4.修改对象属性的值
属性存在的时候是修改，不存在的时候就是添加
对象.属性 = 值
对象[属性名] = 值
p5.name = '小红'
console.log(p5)
p5['age'] = 30
console.log(p5)
5.添加属性
p5.num = '100222'
p5['num2'] = '110222'
console.log(p5)
给对象添加属性只作用于一个对象,不影响其他对象
:注意：构造方法名(类名).prototype.属性 = 值 --- 给指定构造方法创建的所有的对象都添加指定的属性
Person.prototype.aaa = '123'
p6 = new Person()
p6.aaa = 'abc'
console.log(p6.aaa)
console.log(p5.aaa)
练习：给String类型添加方法
String.prototype.ytIndex = function(x){
return this[x]
}
str1 = new String('abcdef')
console.log(str1.ytIndex(0))
console.log('hello'.ytIndex(3))
练习：练习：用一个数组保存多个学生对象，要求学生对象中有姓名，年龄和成绩。最后所有学生按成绩进行排序
students = [new Student('小明', 18, 90), new Student('小红', 20, 78), new Student('小花', 19, 98)];
//sort方法排序后，原数组会改变，也会产生新的数组
newStudents = students.sort(function(a,b){
return a.score - b.score;
});
console.log(newStudents, students)
2.DOM获取节点
什么是DOM(文档对象模型)
DOM是document object mode的缩写
DOM模型就是一个树结构，里面是由各种节点组成
document对象 - js写好的一个对象,代码的是网页内容结构
通过document对象可以拿到网页中所有内容对应的节点
2.节点操作====获取节点
1.直接获取节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1" class="c1">我是段落1</p>
<a href="" id="a1">百度一下</a>
<a href="" class="c1">刷新</a>
<input type="text" name="username" value="" />
<input type="password" name="username" value="" />
</body>
</html>
- a.通过标签的id值来获取指定的标签
document.getElementById(id值) - 返回节点对象
如果html中同样的id对应的标签有多个，只能取一个。所有一般在使用id的时候id要唯一
var pNode = document.getElementById('p1')
console.log(pNode)
- b.通过标签名来获取指定的标签
document.getElementsByTagName(标签名) - 返回的是一个数组对象，数组中是节点
var aNodeArray = document.getElementsByTagName('a')
for(x in aNodeArray){
// 拿到aNodeArray对象中的所有属性,这儿除了a标签以外还有length，item等其他非标签对象
var aNode = aNodeArray[x]
// 只对标签进行操作
if(typeof(aNode) == 'object'){
console.log(aNode, '是标签！')
}
}
- c.通过类名来获取指定的标签
document.getElementsByClassName(类名) - 获取所有class属性值是指定的值的标签,返回的是一个数组对象
var c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
- d.通过name属性的值来获取指定的标签(了解)
返回的是数组对象
console.log(document.getElementsByName('username'))
2.间接获取节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box1">
box1
<div id="box11">
div11
</div>
<div id="box12">
div12
</div>
<div id="box13">
div13
</div>
</div>
</body>
</html>
1.获取父节点
子节点.parentElement - 获取子节点对应的父节点
var box11Node = document.getElementById('box11');
//1.获取父节点
var box1Node = box11Node.parentElement;
var box1Node2 = box11Node.parentNode;
console.log(box1Node, box1Node2);
2.获取子节点
- a.获取所有的子节点
父节点.children - 返回一个数组对象
var allChildArray = box1Node.children
console.log(allChildArray)
了解：父节点.childNodes - 获取父节点下所有的内容（包括子节点和文本）
var allChildArray2 = box1Node.childNodes
console.log(allChildArray2)
- b.获取第一个子节点
//父节点.firstElementChild
var childNode = box1Node.firstElementChild
console.log(childNode) - c.获取最后一个子节点
var childNode2 = box1Node.lastElementChild
console.log(childNode2)
3.创建添加删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="addDiv()">添加</button>
<p id="p1", class="cp1" style="color: darkseagreen;">我是段落</p>
<div id="div1" style="height: 400px; background-color: lightgoldenrodyellow;">
<div id="div11" style="height: 60px; width: 120px; background-color: yellowgreen;">
</div>
</div>
</body>
</html>
1.获取标签内容
var pNode = document.getElementById('p1');
var content = pNode.innerHTML;
1.1修改标签内容
pNode.innerHTML = '我不是段落，哈哈~'
2.获取标签样式中的文字颜色
var pColor = pNode.style.color;
2.1修改标签样式
pNode.style.color = 'salmon'
pNode.style.fontSize = '30px'
console.log(content, pColor)
3.创建节点
方法：document.createElement(标签名) - 创建指定标签节点(创建后不会自动添加到浏览器上)
- a.节点属性：
标签节点就是标签对象，可以通过document去网页中获取到，也可以自己创建
标签对象中有相应的标签相关的属性，可以通过标签节点获取或者修改这些属性值。
例如，a标签节点有：href属性, id属性, className属性, style属性等....
img标签节点有：src属性,id属性，style属性,alt属性, title属性等.... - b.innerHTML和innerText属性
innerHTML - 双标签的标签内容(包含其他标签)
innerText - 双标签的标签内容(侧重只有文字)
3.1创建一个div标签对象
var divNode = document.createElement('div')
divNode.innerText = '我是box1'
3.2创建一个img标签对象
var imgNode = document.createElement('img')
imgNode.src = 'img/thumb-1.jpg'
4.添加节点
- a.在指定的标签中的最后添加一个节点
父节点.appendChild(需要添加的节点)
var div1Node = document.getElementById('div1')
function addDiv(){
var divNode = document.createElement('div')
divNode.innerText = '我是box1'
div1Node.appendChild(divNode)
}
- b.在指定的节点前插入一个节点
父节点.insertBefore(新节点, 指定节点) --- 在父节点中的指定节点前插入新节点
div1Node.insertBefore(imgNode, div1Node.firstChild)
5.清楚节点
5.1父节点.removeChild(子节点) - 删除父节点中指定的子节点
div1Node.removeChild(imgNode)
5.2清空标签（删除所有的子标签）
div1Node.innerHTML = null
网友评论