14DOM编程API（二） 

 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>

 

posted @ 2024-03-27 20:26  白茶花约  阅读(19)  评论(0)    收藏  举报