3HTMLDOM树.png
3HTMLDOM树访问.png
3简单了解dom.png
3查找元素.png
3查找元素2.png
例如通过类名寻找的div集合，想要给他们全部设置为红色，不可以divs.style.color='red';只能通过for循环给他们一个个设置：
var divs=document.getElementsByClassName("box");
for(var i=0;i<divs.length;i++){
divs[i].style.color='red';
}
即使类名为box的只有一个元素，得到的也是一个集合，也需要通过下标获取。
学习css时有嵌套选择器，如div下的p标签，js如何做到
var myText=document.getElementsByTagName("p");//找到所有的p标签
var box=document.getElementsByClassName("box");
var p=box.getElementsByTagName("p");//找到类名为box内面的p标签
//这个得到的也是集合
p[0].style.color='red';
简单的选择器封装：
<body>
<div>1</div>
<div class="box">
<p>div内面的p标签</p>
</div>
<p>div外面的p标签</p>
<div class="box">box</div>
<div class="box">box</div>
</body>
<script>
// 这个封装只考虑三种情况，标签名、类名、id名
function $(a) {
var el_arr = [];
if (a.indexOf("#") == 0) {
var el = document.getElementById(a.split("#")[1]);
//找不到这个元素则返回null,这样就不用push
if (el) {
el_arr.push(el);
}
} else if (a.indexOf(".") == 0) {
var el = document.getElementsByClassName(a.split(".")[1]);
//找不到这个元素则返回HTMLCollection []这样一个空数组,这样就不用push
if (el.length) {
for (var i = 0; i < el.length; i++) {
el_arr.push(el[i]);
}
}
} else {
var el = document.getElementsByTagName(a);
if (el.length) {
for (var i = 0; i < el.length; i++) {
el_arr.push(el[i]);
}
}
}
return a.indexOf("#") == 0 ? el_arr[0] : el_arr;
}
/*
// 这样扩展起来麻烦一些
function $(a) {
var el_arr = [];
if (a.indexOf("#") == 0) {
var el = document.getElementById(a.split("#")[1]);
} else if (a.indexOf(".") == 0) {
var el = document.getElementsByClassName(a.split(".")[1]);
} else {
var el = document.getElementsByTagName(a);
}
return el;
}
console.log($("div"));
console.log($(".box"));
*/
console.log($("div"));
console.log($(".box"));
</script>
<body>
<div>1</div>
<div class="box">
<p>div内面的p标签</p>
</div>
<p>div外面的p标签</p>
<div class="box">box</div>
<div class="box">box</div>
</body>
<script>
// 简单的封装css
function $(a) {
var el_arr = [];
if (a.indexOf("#") == 0) {
var el = document.getElementById(a.split("#")[1]);
if (el) {
el_arr.push(el);
}
} else if (a.indexOf(".") == 0) {
var el = document.getElementsByClassName(a.split(".")[1]);
if (el.length) {
for (var i = 0; i < el.length; i++) {
el_arr.push(el[i]);
}
}
} else {
var el = document.getElementsByTagName(a);
if (el.length) {
for (var i = 0; i < el.length; i++) {
el_arr.push(el[i]);
}
}
}
return {
color: function(a) {
for (var i = 0; i < el_arr.length; i++) {
el_arr[i].style.color = a;
}
}
};
}
$("div").color("red");
</script>
//选择器嵌套封装
<body>
<div>1</div>
<div class="box">
<span>span</span>
<p>div内面的p标签</p>
</div>
<div class="box">
<p>div内面的p标签<span>span</span></p>
</div>
<p>div外面的p标签</p>
<div class="box">box</div>
<div class="box">box</div>
</body>
<script>
function getEl(selector) {
//例如传入 ".box p span"
var select_arr = selector.split(" "); //生成选择器数组[".box","p","span"]
var el_arr = [];
for (var i = 0; i < select_arr.length; i++) {
//根据长度生成几个空数组
el_arr.push([]);
} //[[.box,.box],[],[]]
for (var i = 0; i < select_arr.length; i++) {
if (select_arr[i].indexOf("#") == 0) {
var el = document.getElementById(
select_arr[i].split("#")[1]
);
el_arr[i].push(el);
} else if (select_arr[i].indexOf(".") == 0) {
if (i == 0) {
//看是不是首个选择器，如果是就document.get……,
var el = document.getElementsByClassName(
select_arr[i].split(".")[1]
);
el_arr[i] = Array.prototype.slice.call(el);
} else {
//如果不是就上一级选择器数组.get……
for (var j = 0; j < select_arr[i - 1].length; j++) {
var el = el_arr[i - 1][j].getElementsByClassName(
select_arr[i].split(".")[1]
);
el_arr[i].push(Array.prototype.slice.call(el));
}
}
} else {
if (i == 0) {
var el = document.getElementsByTagName(select_arr[i]);
el_arr[i] = Array.prototype.slice.call(el);
} else {
for (var j = 0; j < el_arr[i - 1].length; j++) {
var el = el_arr[i - 1][j].getElementsByTagName(
select_arr[i]
);
el_arr[i] = el_arr[i].concat(
Array.prototype.slice.call(el)
);
}
}
}
}
return el_arr[el_arr.length - 1];
}
console.log(getEl(".box p span")[0].innerHTML);
</script>
只能是document.getElementById,不能是divs.getElementById因为整个dom结构中只有唯一的id所以只能由document来调用。
document.getElementsByTagName这样得到的是伪数组，不能调用数组的slice等方法，需要将伪数组转换成数组，Array.prototype.slice.call(伪数组)来转换成数组。但是[1,2,3].concat(伪数组)好像可以
var xx=document.getElementsByTagName("p");
console.log([1,2,3].concat(xx));
// [1, 2, 3, HTMLCollection(3)]
(所以说数组内面什么都可以装)
