什么是DOM
DOM(Document Object Model)
是一种文档对象模型,同时也是用于html编程的接口,通过DOM来操作页面中的元素。当html页面被实现加载的时候,浏览器会创建一个DOM,给文档提供了一种新的逻辑结构,并且可以改变内容和结构。
DOM中的元素以树状结构表示层级关系,所有又叫DOM树,每个元素都是DOM树的节点。
W3C DOM标准被分为3个不同的部分:
- Core DOM——所有文档类型的标准模型
- XML DOM——XML文档的标准模型
- HTML DOM——HTML文档的标准模型
使用DOM提供的属性和方法可以通过编写JS代码来实现页面动态的功能
- 注:DOM 的api并不属于JS语言本身,而是浏览器实现了api并赋予开发者使用DOM的能力
常见DOM类型:
- Document类型——代表整个页面文档
选择元素:
<div id="www"></div>
document.querySelector("#www")
创建元素:
<div></div>
document.creatElement("div")
- NodeList类型——代表节点(元素)的集合
const divs=document.querySelectorAll("div")
- Element类型——代表HTML元素
const btn = document.querySelector("#btn")
获取元素
方式:
1.根据ID获取
2.根据标签名获取
3.通过HTML5新增的方法获取
4.特殊元素获取
根据ID获取
<body>
<div id="www">ok</div>
<script>
var aaa = document.getElementById('www');
console.log(aaa);
</script>
</body>
根据标签名获取
<body>
<ul >
<li>1</li>
</ul>
<script >
var aLi=document.getElementsByTagName('li');
</script>
</body>
通过HTML5新增的方法获取
-
getElementsByClassName(‘类名’) 根据类名返回元素对象集合
-
querySelector(‘选择器’) 根据指定选择器返回第一个元素对象
-
querySelectorAll(‘选择器’) 返回指定选择器的所有元素对象集合
特殊元素获取
获取body
<body>
<script>
var a=document.body;
</script>
</body>
获取HTML元素
<body>
<script>
var a=document.documentElement;
</script>
</body>
事件概述
JavaScript
使我们有能力创建动态页面,而事件基础是可以被JavaScript侦测到的行为。
简单理解:触发—响应机制
操作元素
JavaScript
的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。
改变元素内容有两种方式:
element.innerText
和element.innerHTML
interText 和 innerHTML的区别
- 这两个属性是可读写的 ,可以获取元素里面的内容
- innerText 从起始位置到终止位置的内容,但去除 html 标签,同时空格和换行也会去掉。
- innerHTML 起始位置到终止位置的全部内容,识别 html 标签,同时保留空格和换行。