从JS基础知识到JS web API
1. JS基础知识,规定语法(ECMA 262标准)
2. JS Web API,网页操作的API(W3C标准)
3. 前者是后者的基础,两者结合才能真正实际应用
前言
Vue和React框架应用广泛,封装了DOM操作
但是DOM操作一直都是前端工程师的基础和必备知识
只会vue而不懂DOM操作的前端程序员不会长久
要点
1. DOM 网页的DOM元素文本图片等
2. BOM 浏览器相关(导航,ul,跳转)
3. 事件绑定
4. Ajax网络请求
5. 存储
第六章 JS-Web-API-DOM
DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档
题目
- DOM是那种数据结构?
- DOM操作常用的API?
- Attr和property的区别?
- 一次性插入多个DOM节点,考虑性能
知识点
- DOM的本质
- DOM节点操作
- DOM结构操作
- DOM性能
一、DOM的本质
Xml是一种可扩展的标记语言,可以描述任何一种结构的数据
Html是一种特定的xml,结构和xml相同,但规定了标签的名称规范
DOM的本质是从html解析出来的一棵树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dom 演示</title>
<style>
.container {border: 1px solid #ccc;}
.red {color: red;}
</style>
</head>
<body>
<div id="div1" class="container">
<p id="p1">一段文字 1</p>
<p>一段文字 2</p>
<p>一段文字 3</p>
</div>
<div id="div2">
<img src="https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg"/>
</div>
<ul id="list">
</ul>
<script src="./dom-3.js"></script>