对获得的Html元素进行操作

我们在获得了html元素之后，还可以设置属性，甚至是CSS样式等，来看代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         
 7     </head>
 8     <body>
 9         <div id="one">
10             <span>
11                 在 HTML 中 DOM（文档对象模型）是 Web 前端里最基础、最常用的—模型。
12                 例如，一个网页其实就是一个 HTML 文件，经过浏览器的解析，最终呈现在用户面前。
13             </span>
14         </div>
15         <div class="two">
16             <span>
17                 每一层可以同时存在很多标签，比如 head 和 body 属于同一层，它们被外面的 html 套着。
18                 这样的结构很像计算机里的文件夹。例如，“我的电脑”是最外层，里面套着 C、D、E、F 盘，每个
19                 盘里又有很多文件夹，文件夹里又有文件夹，逐个打开后才能看到具体的文件。
20             </span>
21         </div>
22         <div class="three" name="last">
23             <span>
24                 曾经问过周围的同学：<br/>
25                 你们有热爱的东西么，只要一提起来就会双眼放光的那种？<br />
26                 他们说，没有。但是，我有。<br />
27                 他们不理解你所坚持的，不屑于你所坚持的，甚至是嘲笑，有的时候自己都快要哭出来，不知道坚持的意义。<br />
28                 但是哭过之后，还是要坚强面对。<br />
29                 愿你成为自己的太阳，无需凭借谁的光。<br />
30             </span>
31         </div>
32         <div id="Fight">
33             空
34         </div>
35         <div>
36             我<font id="MyFont" size="5">拼尽全力</font>，只为换取一个不确定的奇迹。
37         </div>
38     </body>
39 </html>
40 <script type="text/javascript">
41         /*操作一：设置内容*/
42         var div = document.getElementById("Fight");  //通过id访问
43         console.log(div);
44         div.innerText="你可以哭，但不能输。";  //注意这两个方法的区别,这个一般用来修改
45         console.log(div.innerText);
46         div.innerHTML="你的坚持，会藏着<font color='red'>未来</font>的样子。";  //可以在这里面添加别的标签
47         console.log(div.innerText);
48         /*设置属性*/
49         var myFont = document.getElementById("MyFont");
50         myFont.setAttribute("color","green"); //属性名/属性值
51         var size = myFont.getAttribute("size"); //获得该属性的信息
52         console.log(size);
53         myFont.setAttribute("style","font-family:楷体"); //设置CSS样式
54 </script>

 除了上面提到的常规操作之外，还有如下的骚操作：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         
 7     </head>
 8     <body>
 9         <div class="three" name="last">
10             <span>
11                 曾经问过周围的同学：<br/>
12                 你们有热爱的东西么，只要一提起来就会双眼放光的那种？<br />
13                 他们说，没有。但是，我有。<br />
14                 他们不理解你所坚持的，不屑于你所坚持的，甚至是嘲笑，有的时候自己都快要哭出来，不知道坚持的意义。<br />
15                 但是哭过之后，还是要坚强面对。<br />
16                 愿你成为自己的太阳，无需凭借谁的光。<br />
17             </span>
18         </div>
19         <div>
20             我<font id="MyFont" size="5">拼尽全力</font>，只为换取一个不确定的奇迹。
21         </div>
22         <a href="#" id="mya">进入bilibili</a>
23         <img src="img/u=2432192550,1789827673&fm=26&gp=0.jpg" id="myimg"/>
24         <input type="checkbox" id="mycheckbox"/>
25     </body>
26 </html>
27 <script type="text/javascript">
28     var mya = document.getElementById("mya");
29     var myimg = document.getElementById("myimg");
30     var mycheckbox = document.getElementById("mycheckbox");
31     
32     mya.setAttribute("href","https://www.bilibili.com");
33     myimg.setAttribute("src","img/img3.duitang.jpg");
34     mycheckbox.setAttribute("checked","true");
35 </script>

在用JavaScript代码修改之前，页面是这样的：

 

用JavaScript代码修改之后，就变成这样了：

 

 

 

 其实上面的骚操作还是太麻烦了，可以直接这么用：

1 mya.href="https://www.bilibili.com";
2 myimg.src="img/img3.duitang.jpg";
3 mycheckbox.checked = true;

效果还是这样：

 

posted @ 2021-02-09 23:42  EvanTheBoy  阅读(105)  评论(0)    收藏  举报