document和js对象
1.Html的Dom树
node.innerHTML//获取节点内部的所有html内容
innerText//获取节点内部的文本信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="fruit" class="cl1">
<li>苹果</li>
<li id="blala">香蕉</li>
<li>蜜瓜</li>
</ul>
<ul id="fruit2" class="cl1">
<li>guapi</li>
<li>hei</li>
<li>hha</li>
</ul>
<p>
<button onclick="add1()">添加</button>
</p>
<script>
function add1() {
//往节点下添加子节点
var fruit = document.getElementById('fruit');
// let li1 = document.createElement('li');
// li1.innerHTML = '<p>葡萄</p>';
// let li2 = document.createElement('li');
// li2.innerText = '<p>西瓜</p>';
// fruit.appendChild(li1);
// fruit.appendChild(li2);
// console.log(fruit.innerText);
//将已有的节点添加到父节点指定位置
// let elementById = document.getElementById('blala');
// fruit.appendChild(elementById);
// 克隆节点
// var sun1=document.getElementById('blala');
// fruit.appendChild(sun1.cloneNode(true));
// 设置节点name属性
fruit.setAttribute('name','food');
// 设置节点css样式
// fruit.style.fontSize='40px ';
// fruit.style.color='red';
}
window.onload = function () {
// var fruit = document.getElementById('fruit');
// let children = fruit.children;
// for (let i = 0; i < children.length; i++) {
// let innerText = children[i].innerText;
// console.log(innerText);
// }
// for (let childrenKey in children) {
// console.log(childrenKey);
// }
//document的document.getElementsByTagNameNS('ul')获取标签名
// let elementsByTagNameNS = document.getElementsByTagName('ul');
// for (let i = 0; i < elementsByTagNameNS.length; i++) {
// console.log(elementsByTagNameNS[i].innerText);
// }
//document的获取指定class的标签
// var nodes=document.getElementsByClassName('cl1');
// for (const node of nodes) {
// console.log(node.innerHTML);
// }
}
</script>
</body>
</html>
for in 遍历的是数组或则对象的下标
for of 遍历的是数组或对象的值
1.document属性
getElementsByTagName('p')//获取的是一个数组对象
getElementById()//获取的是一个节点
getElementsByClassName()//获取的也是一个数组对象
//往一个时间里面绑定两个方法
node.addEventListener('click',fun); node.addEventListener('click',gun);
2.事件处理Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<button onclick="fun('321')">点击</button><p id="p1"></p>
<button id="btn1">点击</button>
<!--sdasdsadas-->
<script>
function fun(e) {
console.log('这是fun函数');
}
function gun(e) {
console.log('这是gun函数');
}
function btn1func(){
document.getElementsByTagName('p')[0].innerText='123';
}
let node = document.getElementById('btn1');
node.addEventListener('click',fun);
node.addEventListener('click',gun);
</script>
</body>
</html>
3.事件源 source
4.事件处理函数 handler
规律：当事件发生时，事件本身会被作为第一个参数传递给事件处理函数
5.捕获
外层元素先得到时间，将时间往内部传递
冒泡：从里向外，依次执行，事件处理函数
捕获型时间和冒泡型时间：并非所有的时间都能支持捕捉和冒泡
2.this指针
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this指针</title>
</head>
<body>
<button onclick="fun(this)">点击1</button>
<script>
function fun(node) {
console.log('12');
console.log(node.innerText);
}
</script>
</body>
</html>
传递this标签传递当前调用的对象作为参数传递
这里的xxx是全局变量，会被添加到window下的属性中。
也可以使用window.xxx引用。
注意：如果与window默认属性重名的话会覆盖其自身属性。
3.js对象
1.Date（）对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<p id="p1"></p>
<script>
function f(){
document.getElementById('p1').innerText=new Date();
}
window.setInterval(f,1000);
</script>
</body>
</html>
- 三种方式：
new Date();//
Date();//调用函数的感觉
new Date;
- 获取当前时间
var date=new Date();//获取当前时间
date.getTime();//获取当前时间为毫秒数
//获取时间将从1970/1/1开始到当前时间。
- Date参数
传递指定时间，获取指定时间的时间戳
var date=new Date('2020,1,1');//获取2020年1月1日的时间
var data1=new Date('1970/1/1 8:0:0');
var data2=new Date('May 9 2021 8:0:0');
var data3=new Date('May 9,2021 8:0:0');
var data4=new Date('May,9,2021 8:0:0');
var data5=new Date('1970-1-1');
var data6=new Date(5);
var data1=new Date('2021,5,9,14,30,50');
//我们的月制从1开始取，人家的从0开始取。所以我们这里会往后一个月。解决可以往前取一个月
//一月 jan 0 二月 Feb 1 十二月 11
- 获取年月日
var dd=new Date('May 9 2021 08:00:00');
dd.getFullYear();//获取准确地年
dd.getMonth()+1;//获取月份
dd.getDate();//获取日
//9
dd.getDay();//星期几
//0
dd.getHours();//时
//8
dd.getMinutes();//分
//0
dd.getSeconds();//秒
//0
4.js类
- js基于对象，类不是很明显 js的类就是一个模板
- 对象可以动态的添加属性
class{
//属性
//行为
}
person1.adress='瑞通开路';
//"瑞通开路"
person1
//{name: "ll", age: 1, sex: "man", adress: "瑞通开路", info: ƒ}
- js对象有一个原型属性 prototype
对原型添加属性的话，person类会继承原型的对象
所以person可以直接使用原型的属性
注：person类和原型属性重名的话，使用person类属性会优先使用自身属性而不是原型属性。
所以此时修改原型属性值后，person使用改属性并不会使用原型的属性值
-
使用属性同名时，使用person.proto.属性名使用原型的属性
-
总结
1.class关键字定义类
class person{ name=""; age=11; sex='man'; constructor(name,age,sex) { this.name=name; this.age=age; this.sex=sex; } work(){ console.log('盘他'); } } let person1 = new person('jack',1,'man'); console.log(person1.name); person1.work();
2.类中的方法不需要function定义
3.构造方法用关键字constructor定义
