Dom概述
JavaScript三大核心:
ECMAScript(基础语法)
DOM Document Object Model (文档对象模型)
BOM Browser Object Model (浏览器对象模型)
跟浏览器本身操作有关的方法 都在BOM里面
BOM最大的对象是 window
什么是DOM:
所谓 DOM就是能够操作页面数据的一个对象总和
这个对象就是document对象
页面所有的文档 都归DOM来管
DOM最大的对象是 document
document就是页面所有标签的祖先元素
通过document能够对页面的任何一个标签进行增删改查
JS是一个受事件驱动的 脚本语言
js的功能要想执行 必须是结合事件来执行的
简单来说就是
在什么时候 做什么事情
所以js都是事件结合代码来操作的
那么要想学习dom就先要学习事件
先学习在什么时候(事件)
再学习 做什么事情(js功能 dom操作)
初步使用
JS的事件时DOM的前提
就是一般DOM的操作都要放到指定的事件里面
JS的事件分为三要素:
事件源
谁触发了事件
事件名称
触发了什么事件
事件驱动函数
要做什么事情
距离:
按动灯的开关 把灯关掉
事件源:
灯的开关
事件名称
按开关的事件
事件驱动函数
灯关闭的代码
写个例子:
按钮点击时 弹出框 显示被点击了
事件三要素
// 事件源 找到按钮对象
var btn=document.getElementById("btn"); //通过标签的id找到这个按钮对象
// 获取box对象
var box=document.getElementById("box");
// console.log(box);
// console.log(btn);
//事件名称 (js已经提供好了 一堆事件 供我们直接使用)
//点击事件
btn.onclick=function () {
// 事件驱动函数 写点击时要执行的代码(可以是一句代码 可以很多句代码)
// alert("你点我干嘛?");
// 给box修改背景颜色(横线在 js中变成驼峰)
box.style.backgroundColor="blue";
}
DOM中获取页面元素有五种方式:
1.document.getElementById("标签的id")
根据标签的id获取标签的元素对象
2.document.getElementsByTagName("标签名");
根据标签名获取好多个元素对象 放入一个伪数组里面
直接根据标签获取元素 但是返回的元素可能有好多个
所以一起放入一个数组中(是个伪数组)
这个方法 就是返回伪数组!!!!!!!!!!!!!
无论找到的元素有几个 0个 1个 1万个
都是一样的 就是返回伪数组
所以证明返回的元素不能直接操作
必须用索引值功能 取出自己想要的元素 然后再进行操作!!!!!!!
var p=document.getElementsByTagName("p");
// console.log(p);
// p.style.color="red";
3.document.getElementsByClassName("标签的class名字");
返回值跟上一个一样 也是伪数组!!!!!!
此方法有兼容问题(后面讲)
var poxArr=document.getElementsByClassName("pox");
console.log(poxArr);
poxArr[0].style.backgroundColor="orange";
poxArr[1].style.backgroundColor="orange";
4.document.querySelector("css选择器")
根据css选择器的格式找到单个元素!!!!!
如果选择器关联的是一堆元素 那么只找到第一个
var ul=document.querySelector("#box>ul");
console.log(ul);
var divPox=document.querySelector("div.pox");
console.log(divPox);
var li=document.querySelector("li");
console.log(li);//只找到第一个li
5.document.querySelectorAll("css选择器")
根据css选择器找到一堆元素 返回伪数组!!!!!!!!!!!
var liArr=document.querySelectorAll("ul>li");
for(var i=0;i<liArr.length;i++){
liArr[i].style.color="red";
}
伪数组:
具有索引值功能 还有length属性
但是没有Array的那些方法 就是伪数组(看起来像是数组 但不是真正的Array数组)
js给页面元素设置样式的方式:
1.元素对象.style.css属性名(横线变驼峰)="css属性值";
这种方式设置的样式 是行内样式 所以权值比较高
如果是一两个简单样式 用这种方式
如果样式比较多 建议用下面的操作的方式
2.元素对象.className="类名";
这个类名是在style里面定义好样式的类名
手动为当前元素设置这个类名 也就生效类名所对应的样式
3.元素对象.className="";
删除元素的class 把class这是为空的 表示没有class
<style>
#box{
width: 200px;
height: 200px;
background-color: orange;
}
.pox{
color:blue;
font-size: 20px;
text-align: center;
line-height:200px;
padding: 50px;
}
</style>
</head>
<body>
<button>设置样式</button>
<button>删除class样式</button>
<div id="box">
大雪纷飞
</div>
<script>
var btn=document.getElementsByTagName("button")[0];//直接取第0号元素!!!!
var btn1=document.getElementsByTagName("button")[1];
var box=document.getElementById("box");
btn.onclick=function () {
/* box.style.color="blue";
box.style.backgroundColor="hotpink";*/
box.className="pox";
};
btn1.onclick=function () {
box.className="";
}
</script>
