![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：写的不错，文档每个标签的都做了解释，这很好！
Collection
Collection
<!doctype html><!--通知浏览器这个一个html5文档--><html lang="en"><!--html 根元素--><head><!-- head 头元素--><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- meta:元数据--><!-- name="viewport" : 设置视口（可视区域屏幕）如何显示这个页面--><!-- width=device-width ：表示宽度是设备屏幕的宽度--><!-- initial-scale=1.0：表示初始的缩放比例--><!-- minimum-scale=0.5：表示最小的缩放比例--><!-- maximum-scale=2.0：表示最大的缩放比例--><!-- user-scalable=yes：表示用户是否可以调整缩放比例--><title>Document</title><!-- title : 当前页面标题--></head><body><!--body : 主题元素--><div>html页面的文档结构</div><!--div : 标签--><style></style><script>// 使用console.log()指令将代码执行结果发送到浏览器控制台显示// 全局window(通常省略)console.log(window);// document当前的html文档console.log(window.document);// urlconsole.log(window.document.URL);console.log(document.URL);// 文档类型console.log(document.doctype);// 根元素htmlconsole.log(document.documentElement);// 头元素console.log(document.head);// 编码console.log(document.charset);// titleconsole.log(document.title);document.title = "如何使用JS脚本访问HMTL";// 主体bodyconsole.log(document.body);document.body.style.backgroundColor = "wheat";// 样式表css 索引的使用console.log(document.styleSheets);console.log(document.styleSheets[0].type);// js脚本console.log(document.scripts);// 获取当前正在被执行的js脚本console.log(document.currentScript);</script></body></html>
1. id属性： 由用户保证它在当前页面的唯一性，浏览器并不检查， 应该专用于获取唯一元素2. class属性: 类属性，返回多个具有共同特征的元素集合3. style属性: 设置当前元素对象的样式
获取元素的几种方法：
let x = document.getElementById(“id”)；
let x = document.getElementsByClassName(“class”)；
let x = document.getElementsByTagName(“p”);
let x = document.querySelector(“.class”);
let x = document.querySelector(“#id”);