DOM全称文件对象模型,w3c推荐的处理可扩展标记语言(html,或xml)的标准编程接口。可以改变网页的内容和结构,样式。
DOM树:
一个页面就是一个文档,document;
文档中含义多级多种标签,element;
网页的所有内容都是节点,node;
DOM中,把上面三种都看作对象;(可以用变量指向对象)
获取对象方式;
常用getElementById();
ele1=document.getElementById('对象id')
同理可以用getElementsByTagName()
注意是标签名,所以会返回所有标签元素,加S;
也可以用类名(注意新版本支持以下类型)
getElementsClassname(‘类名’)返回所有标签元素;
document.querySelector(’.‘类名/’#id’/‘标签’)返回第一个标签元素
document.querySelectorAll(’.‘类名/’#id’/‘标签’)返回所有标签元素
现有标签,然后才能获取,即这些函数要在标签的下面使用。
特殊元素对象的获取
mybody=document.body;
myhtml=document.documentElement;
事件
事件可以理解为触发响应机制;
通常情况下,分三步,找到事件源(对象),确定事件类型(触发方式),运行事件处理程序(执行自定义函数);
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>唐伯虎</button>
<script>
//点击按钮弹出对话框
var btn=document.querySelector('button')
btn.onclick=function(){
alert('秋香');
}
</script>
</body>
</html>
鼠标事件:
我们也可以不绑定事件,直接进行操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1></h1>
<!-- 空标题 -->
<script>
var head1=document.querySelector('h1');
head1.innerText='happy';
// 对标签内容更换
</script>
</body>
</html>
innerText或者innerHtml是标签的属性,可读写(赋值)
区别是innerText不识别HTML标签,而innerHtml识别;
都是修改属性。
修改元素:
在js中,我们用this代表被触发的对象。
修改元素内容:this.innerHtml=" "
修改元素属性:this.属性=" "
修改元素样式:this.style.属性=" "
还可以通过更改元素的类名实现元素变化