1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <script>
8 /*
9 DOM编程就是用document对象API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程
10 3 对元素进行操作
11 1.操作元素的属性 元素.属性名="" 赋值
12 2.操作元素的样式 元素.style.样式名="" 原始样式名中的"-"符号，要转换驼峰式
13 3.操作元素的文本 元素名.innerText（只识别文本） 元素名.innerHTML（同时可以识别html代码）
14 4.增删元素
15 */
16 function changeAttribute(){
17 var in1 = document.getElementById("in1")
18 // 语法 元素.属性名="" 赋值
19 // 获得属性值
20 console.log(in1.type)
21 console.log(in1.value)
22 // 修改属性值
23 in1.type="button"
24 in1.value="嗨"
25 }
26 function changeStyle(){
27 var in1 = document.getElementById("in1")
28 // 语法 元素.style.样式名="" 原始样式名中的"-"符号，要转换驼峰式，如 border-radius --> borderRadius
29 in1.style.color="pink"
30 in1.style.borderRadius="5px"
31 }
32 function changeText(){
33 var div01 = document.getElementById("div01")
34 /*
35 语法 元素名.innerText 只识别文本
36 元素名.innerHTML 同时可以识别html代码
37 */
38 console.log(div01.innerText)
39 div01.innerHTML="<h1>嗨</h1>"
40 }
41 </script>
42 <style>
43 #in1{
44 color: aquamarine;
45 }
46 </style>
47 </head>
48 <body>
49 <input type="text" value="hello" id="in1">
50 <br>
51 <div id="div01">
52 hello
53 </div>
54 <hr>
55 <button onclick="changeAttribute()">操作属性</button>
56 <button onclick="changeStyle()">操作样式</button>
57 <button onclick="changeText()">操作文本</button>
58 </body>
59 </html>
标签：style,编程,div01,样式,元素,in1,API,document,14DOM From： https://www.cnblogs.com/IrVolcano/p/18100160