发表于： 2020-07-22 22:55:09
1 1202
今天完成的事情：
学习dom查询，引入到html，css
练习使用dom
遇到的问题：
1.目前看得懂js语句的意思，但还不会写，自己设置响应函数会有错误，检查元素有时候也检查不来，
如：alert(items[i].value) , alert(items[i].innerHTML);一个可以检查input的value元素，一个用于检查html元素
还有检查其他的元素的方法，有时不会用，导致检查的元素为空或出错
2.js的代码还是不太熟悉，师兄js的源代码网上有下载的地址吗，我想练习写源生代码熟悉js代码
dom获取元素的方法示例：
window.onload = function () {
// 获取body标签
// var body = document.getElementsByTagName("body")[0];
// 在document中有一个属性body,它保存的是body的引用
var body = document.body;
// document.documentElement保存的是html根标签
var html = document.documentElement;
// console.log(html);
// document.all代表页面中所有的元素
var all = document.all;
// console.log(all.length);
/*
for (var i = 0; i < all.length; i++) {
console.log(all[i]);
}
*/
// all = document.getElementsByTagName("*");
// console.log(all.length);
/*
// 根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性获取一组元素节点对象,不支持ie8以下
*/
// var box1 = document.getElementsByClassName("box1");
// console.log(box1.length);
// 获取页面中所有的div
// var divs = document.getElementsByTagName("div");
// console.log(divs.length);
// 获取class为box1中的所有的div
/*
document.querySelector()
- 需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素
- 该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1");
// console.log(div.innerHTML);
// console.log(box1);
/*
document.querySelectorAll()
- 与document.querySelector()类似,但它会将所有符合条件的元素封装到一个数组中返回
- 该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
*/
var box1 = document.querySelectorAll(".box1");
// var box1 = document.querySelectorAll("#box2");
console.log(box1);
console.log(box1.length);
};
返回列表
评论