//1.什么是对象(Object) - 和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对象
*/
//3.使用对象属性（获取属性值）
/*
* a. 对象.属性 - p5.name
* b. 对象[属性名]
*/
var t = 'age'
p5 = new Person('小花', 20, '女')
console.log(p5.name)
console.log(p5['name'], p5[t])
p5.eat('面条')
//4.修改对象属性的值
/* 属性存在的时候是修改，不存在的时候就是添加
* 对象.属性 = 值
* 对象[属性名] = 值
*/
//修改属性值
p5.name = '小红'
console.log(p5)
p5['age'] = 30
console.log(p5)
//添加属性
p5.num = '100222'
p5['num2'] = '110222'
console.log(p5)
//给对象添加属性只作用于一个对象,不影响其他对象
console.log(p4)
//构造方法名(类名).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))
//练习：用一个数组保存多个学生对象，要求学生对象中有姓名，年龄和成绩。最后所有学生按成绩进行排序
function Student(name, age, score){
this.name = name;
this.age = age;
this.score = score;
return this;
}
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)
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')
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属性的值来获取指定的标签(了解)
/* document.getElementsByName('username') - 返回一个节点数组对象
*/
console.log(document.getElementsByName('username'))
<div id="box1">
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.getElementById('box11');
//1.获取父节点
// 子节点.parentElement - 获取子节点对应的父节点
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)
<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>
<script type="text/javascript">
var pNode = document.getElementById('p1');
//获取标签内容
var content = pNode.innerHTML;
//修改标签内容
pNode.innerHTML = '我不是段落，哈哈~'
//获取标签样式中的文字颜色
var pColor = pNode.style.color;
//修改标签样式
pNode.style.color = 'salmon'
pNode.style.fontSize = '30px'
console.log(content, pColor)
//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 = '我是box1'
//创建一个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 = '我是box1'
div1Node.appendChild(divNode)
}
//b.在指定的节点前插入一个节点
//父节点.insertBefore(新节点, 指定节点) --- 在父节点中的指定节点前插入新节点
div1Node.insertBefore(imgNode, div1Node.firstChild)
//3.删除节点
//父节点.removeChild(子节点) - 删除父节点中指定的子节点
div1Node.removeChild(imgNode)
//清空标签（删除所有的子标签）
div1Node.innerHTML = null
//节点.remove() - 将节点从浏览器中删除
```
网友评论