前端开发详解：HTML、CSS与JavaScript三层结构

javascript

java

需积分: 0 53 浏览量更新于2024-08-04 收藏 90KB DOCX 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"12-15 课堂笔记1 关于前端三层及JavaScript组成的详细解析" 在前端开发中，我们通常将网页结构分为三层：结构层、样式层和行为层。这些层共同协作，构建出一个功能完备且视觉美观的动态网页。 1. 结构层：由HTML（超文本标记语言）标签构成，主要负责定义网页内容的结构和意义。HTML标签如`<html>`、`<head>`、`<body>`、`<div>`等，它们按照一定的规则组织起来，形成了网页的基本框架，为样式和行为提供了基础。 2. 样式层：CSS（层叠样式表）用于定义网页元素的外观、布局和结构。通过选择器和声明，我们可以控制元素的颜色、尺寸、位置等视觉效果，使网页具有良好的用户体验和设计感。 3. 行为层：JavaScript，它赋予网页动态交互的能力。JavaScript可以响应用户操作，改变页面内容，与服务器通信，以及执行复杂的逻辑功能。JavaScript由三个主要部分组成： - ECMAScript：是JavaScript的基础，定义了语言的语法和基本对象。ECMAScript标准由欧洲计算机协会制定，每年都会更新，如ES6、ES7等。 - DOM（Document Object Model）：文档对象模型，是一种统一的接口，允许程序和脚本动态更新、添加、删除和改变HTML或XML文档的结构。在JavaScript中，DOM提供了一种以树形结构表示文档的方法，通过`document`对象我们可以访问和操作页面上的任何元素。 - BOM（Browser Object Model）：浏览器对象模型，提供了与浏览器进行交互的接口，如窗口管理、历史记录、导航、定时器等。例如，我们可以使用`window`对象来控制浏览器的行为。在示例代码中，展示了如何使用JavaScript来访问和操作DOM的一些基本属性： ```javascript // 获取DOM的根元素（HTML标签） console.log(document.documentElement); // 获取head标签 console.log(document.head); // 获取body标签 console.log(document.body); // 操作title标签文本 console.log(document.title); ``` 通过这些API，开发者可以实现对网页内容的动态操作，如修改元素样式、添加新的元素或者响应用户的交互事件。理解并熟练掌握前端三层和JavaScript的组成，对于成为一名合格的前端开发者至关重要。

资源详情

资源推荐

马士兵教育

第 3 页共 11 页

console.log(document);

console.log(typeof document);

//四个小属性

console.log(document.documentElement);

console.log(document.head);

console.log(document.body);

console.log(document.title);

//下面是错误的写法

console.log(document.div);

console.log(document.meta);

</script>

2.1.2DOM 方法

上面我们已经学习了四个属性:documentElement(获取 HTML 标签),head(获取 head 标签),body(获取 body

标签),title(获取标题文字内容)。

如果想获取其他页面中标签：需要通过一些方法获取，DOM 方法很多，今天怎么暂时学习一个。

getElementById：DOM 这个方法可以通过标签的 ID 选择器匹配任意节点树上标签。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

</ul>

</div>

</body>

</html>

剩余10页未读，继续阅读

刘璐璐璐璐璐

粉丝: 35
资源: 326

前端开发详解：HTML、CSS与JavaScript三层结构

JAVA零基础学习-课堂笔记

预习视频配套资料-java入门视频课堂笔记(1).zip_java入门课堂笔记

嵩天python课堂笔记

狂神mybatis课堂笔记

软件测试自动化课堂笔记

os实验2-3 课堂练习2.2 中断/异常的处理过程实验答案

动力节点杜老师aja课堂笔记

rancher小滴课堂笔记

【狂神课堂代码】spring课堂笔记

javaee企业级应用开发教程第二版课堂笔记

高淇python400集课堂笔记pdf

oracle 19c ocp全程课堂笔记

Faster R-CNN 学生课堂

oracle第八章集合运算课堂笔记和练习

写一篇语文考研组备课笔记检查小结

请帮我制作一张明日学习计划的表格

python第一节课课堂笔记

康奈尔笔记模版

adb: error: failed to copy 'E:\PR\UIAUTO\Day06\02_课堂笔记\01.txt' to '/sdcard/': remote couldn't create file: Is a directory E:\PR\UIAUTO\Day06\02_è¯¾å ç¬è®°\01.txt: 0 files pushed. 0.0 MB/s (16 bytes in 0.001s)

scikit-learn版本

最新资源

adb: error: failed to copy 'E:\PR\UIAUTO\Day06\02_课堂笔记\01.txt' to '/sdcard/': remote couldn't create file: Is a directory E:\PR\UIAUTO\Day06\02_è¯¾å ç¬è®°\01.txt: 0 files pushed. 0.0 MB/s (16 bytes in 0.001s)