发表于： 2022-12-06 19:29:17
0 305
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素</title>
</head>
<body>
<!--<div id="time">2022-10-1</div>-->
<!-- <ul>-->
<!-- <li>元素获取1</li>-->
<!-- <li>元素获取2</li>-->
<!-- <li>元素获取3</li>-->
<!-- <li>元素获取4</li>-->
<!-- <li>元素获取5</li>-->
<!-- </ul>-->
<ol id="ol">
<li>生僻字1</li>
<li>生僻字2</li>
<li>生僻字3</li>
</ol>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<script>
//1、因为我们的文档是从上往下加载，所以我们先得有标签 所以我们的scriot写到标签下面。
//2、get 获得 elemeent 元素 by 通过 驼峰命名法
//3、参数 id是大小写敏感的字符串
//4、返回的是一个元素对象
// var times = document.getElementById('time');
// console.log(times);
// console.log(typeof times); //object
// //5、 console.dir(); 打印我们返回的元素对象， 更好的查看里面的属性和方法
// console.dir(times);
// 1、返回的是 获取过来的元素对象的集合 以伪数组的形式存储的
// var lis = document.getElementsByTagName('li');
// console.log(lis);
// console.log(lis[1]);
//2、 我们需想要依次打印里面的元素我们可以采取遍历的方式。
// for(var i = 0; i < lis.length; i++) {
// console.log(lis[i]);
// }
//3、 如果页面中只有一个li 返回的还是伪数组的形式
//4、 如果页面中没有这个元素 返回的是 空的伪数组 的形式
//5、 element.getElementsByTagName('标签名')
//父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。
// var ol = document.getElementsByTagName('ol');
// console.log(ol[0].getElementsByTagName('li'));
// var ol = document.getElementById('ol');
// console.log(ol.getElementsByTagName('li'));
//1、getElementsByClassName 根据类名获取某些元素
// var boxs = document.getElementsByClassName('box');
// console.log(boxs);
//2、 querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #ol
var f1 = document.querySelector('.box');
console.log(f1);
var f2 = document.querySelector('#ol');
console.log(f2);
var li = document.querySelector('li');
console.log(li);
// 3、querySelectorAll() 返回的是指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var a = document.querySelectorAll('li');
console.log(a);
//1、获取 body 元素
var c = document.body;
console.log(c);
console.dir(c);
//3、获取 html 元素
var c1 = document.documentElement;
console.log(c1);
//简单数据类型 null 它返回的是一个空的对象 object
// var timer = null;
// console.log(typeof timer); //object
function fn(a) {
a++;
console.log(a);
}
var x = 10;
fn(x);
console.log(x);
//复杂数据类型
function Person(name) {
this.name = name;
}
function f1(x) {
console.log(x.name);
x.name = '张学友';
console.log(x.name);
}
var p = new Person('刘德华');
console.log(p.name);
f1(p);
console.log(p.name);
</script>
</body>
</html>
明天计划：完成接下来的任务。
返回列表
评论