<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
// 获取body标签
// 方式1：
var body = document.getElementsByTagName("body")[0];
console.log(body); //[object HTMLCollection] 表示一个数组，可以获取下标的一个元素
// 在doucument中有一个属性body，它保存的是body的引用
var body = document.body;
console.log(body); //[object HTMLBodyElement]
// document.documentElement保存的是html的根标签 ，表示文档元素
var html = document.documentElement;
console.log(html); //[object HTMLHtmlElement]
// document.all 代表页面中所有元素
var all = document.all;
console.log(all); //undefined
console.log(all.length); // 6个标签元素
for(var i=0; i<all.length; ++i) {
console.log(all[i]);
}
// 也可以通过下面的方式获取页面中所有元素
all = document.getElementsByTagName("*");
console.log(all.length); // 6个
/*
* getElementsByClassName()可以根据元素的class属性值查询一组元素节点对象
* 但此方法不支持IE8以下的浏览器
*/
var box1 = document.getElementsByClassName("box1");
console.log(box1.length); // 2个
/*
* document.querySelector()
* -需要一个选择器的字符串作为参数，
* -可以根据一个CSS选择器来查询一个元素节点对象
* -虽然IE8中不支持getElementsByClassName()，但是可以使用querySelector()代替之
* -使用该方法总会返回唯一的一个元素，若满足条件的元素有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
console.log(div.innerHTML);
box1 = document.querySelector(".box1");
console.log(box1.innerHTML);
/*
* document.querySelectorAll()：该方法和querySelector()类似，不同的是它会将结果封装到一个数组中
* 即使符合条件的元素只有一个，也会返回一个数组
*/
list = document.querySelectorAll(".box1");
console.log(list.length); //[object NodeList]
};
</script>
</head>
<body>
<div class="box1">
我是第一个box1
<div>我是box1中的div</div>
</div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</body>
</html>
javascript学习笔记（八）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- String 对象用于处理已有的字符块。 txt.length得到字符串长度 txt.big()：字体变大 txt...
- 第1章 JavaScript 简介 1.1 JavaScript 组成： 核心（ECMAScript） + 文档对...
- update：2017-10-23 更新了文中一些表达以及添加了JS编译部分的理解。2018-06-06 这篇...
- JavaScript输出 JavaScript 可以通过不同的方式来输出数据： 使用window.alert()弹...
- 参考资料：《JavaScript从入门到精通》、《PHP、MySQL与JavaScript学习手册》 JavaSc...
