DOM常用操作 - 万金流

如题。

大多数情况下，操作文档对象模型，就是对html文档中的各个标签进行操作。

例，设置p标签内容为“hi”

html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>        
    </head>
    <body>
        <p class="c1" id="p1">123</p>
    </body>
</html>
<script src="1.js"></script>

js:

1 x = document.querySelector("p");
2 //x = document.querySelector(".c1");
3 //x = document.querySelector("#p1");
4 console.log(x.textContent);
5 x.textContent = "hi";

结果：控制台出现“123”，页面上出现“hi”。

常用操作：获得指定标签x，获得/设置x的内容，添加/删除标签（见另一篇博文）。

获得指定的标签：

传统方法--用getElementById方法，通过id获得。

较新方法--用querySelector方法，通过类似Css选择器的方式（标签、类、id）获得。

上例中，第2、3行和第1行等效。

获得/设置标签的内容：

标签的内容，大致分为三种。

1、标签内的文本内容，使用标签的“textContent“属性获得/设置。

2、标签内的html内容，使用标签的“innerHTML”属性获得/设置。

例：

html

<body>
    <p class="c1" id="p1"><span>123</span></p>
</body>

console.log(document.querySelector("p").textContent);
console.log(document.querySelector("p").innerHTML);
document.querySelector("p").innerHTML="1<br>2<br>3";

控制台显示内容：

123
<span>123</span>

页面显示内容为带换行的123。

3、对于input标签，应当用value属性获取/设置它的值。

例：html

<body>
        <input type="text" id="t1" value="初始值">
    </body>

x=document.querySelector("#t1");
console.log(x.value);
x.value="设置值";

控制台出现“初始值”，页面出现“设置值”。效果自行查看。

如果想选出一堆特定控件，可以使用“document.querySelectorAll()”方法。该方法得到一个满足条件的控件数组。

例，对一个3*3的表格，依次填入自然数序列：

html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/1.js"></script>
 7         <link rel="stylesheet" href="css/1.css">
 8     </head>
 9     <body onload="f1();">
10         <table>
11             <tr><td></td><td></td><td></td></tr>
12             <tr><td></td><td></td><td></td></tr>
13             <tr><td></td><td></td><td></td></tr>
14         </table>
15     </body>
16 </html>

1 function f1()
2 {
3     let t=10;
4     let a=document.querySelectorAll("td");
5     for(i=0;i<a.length;i++)
6     {
7         a[i].textContent=t++;
8     }
9 }

运行结果：

onload是文档对象模型里常见的一个事件，是在浏览器读完它的内容后再触发（发生，执行后面的代码）。另一个常见的事件就是onclick，我们见过，不赘述。其他常见事件（如双击、焦点什么的），可以用到的时候自学一下。

获取/设置对象属性可以用对象的 getAttribute(属性); 和 setAttribute(属性，值)；方法。其中属性和值是字符串。例：

    let a=document.querySelector("p");
    let b=a.getAttribute("onclick");
    a.setAttribute("onclick","f2(2);");    
    console.log(b);

说到这，再额外提个小东西。js中还有个“浏览器对象模型”，又叫BOM，表示客户的浏览器。有很多内置的对象和方法，常用的不多。最常见的一个属性和操作，是 location.href="xxx.com" 。js执行到这一句，页面会跳转到xxx.com。其他的，感兴趣自己看。

html的第9行，表示body装载完毕后运行函数f1。如果把f1的运行写在第6行，则运行的第6行的时候，表格（10-14行）还未加载，也就没有预期效果。

js第4行，获得一组（此处为9个）td标签。5-8行依次赋值。

小练习：简单计算器

利用js改变元素的css属性。

可以利用元素的style属性值去获取/改变它的css属性。需要注意：

1、凡是带”-“的css属性，一律把减号去掉，减号后面的字母大写。

2、这种方式仅对元素的行内css属性值有效，故通常仅用于设置。

例：点击按钮，实现红黄绿切换。

html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/1.js"></script>
 7         <!-- <link rel="stylesheet" href="css/1.css"> -->
 8     </head>
 9     <body>
10         <div style="text-align: center;margin-top: 20px;">
11             <div id="d1" style="height: 300px; width: 300px;background-color: red;border-radius: 50%;margin: 0 auto;">
12             </div>
13             <input type="button" value="变色" style="margin-top: 40px;" onclick="f1();"/>
14         </div>
15     </body>
16 </html>

其中，11-12行为一个红色的圆，点击13行的按钮，执行f1函数，获取和改变圆的”background-color“属性。

 1 function f1()
 2 {
 3     let a=document.querySelector("#d1");
 4     let mycolor=a.style.backgroundColor;
 5     console.log(mycolor);
 6     if(mycolor=="red")
 7     {
 8         a.style.backgroundColor="yellow";
 9     }
10     else if(mycolor=="yellow")
11     {
12         a.style.backgroundColor="green";
13     }
14     else
15     {
16         a.style.backgroundColor="red";
17     }
18 }

运行效果

小练习：猜数字

js代码中常常用到的两个跟时间有关的函数：

1、setTimeout(参数1,参数2)。参数1是一个函数，参数2是一个时间（毫秒）。

表示间隔参数2时间后，执行参数1表示的函数。只执行一次。

例，请人吃饭，别人思考三秒后拒绝：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/1.js"></script>
 7         <script>
 8             function f1()
 9             {
10                 a=document.querySelector("input");
11                 //三秒后回复
12                 setTimeout(f2,3000,a);//可以通过追加参数的方式传递引用
13             }
14             function f2(x)
15             {
16                 alert("我不去");
17                 x.value="no";
18             }
19         </script>
20     </head>
21     <body>
22         <input type="button" value="请你吃饭" onclick="f1()"/>
23     </body>
24 </html>

效果自行查看。

2、setInterval函数与setTimeout类似，表示每隔参数2的时间执行参数1，多次执行。函数运行会返回一个数字，可以用来标识它。

使用clearInterval(标识)可以停止反复执行。

例：

var intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');

function myCallback(a, b)
{
 console.log(a);
 console.log(b);
}

在html中，点击按钮

1 <input type="button" value="停止" onclick="clearInterval(intervalID);"/>

即可停止。

结果自行查看。

小练习：js倒计时

posted on 2023-05-30 10:54 万金流阅读(380) 评论(0) 编辑收藏举报

搜索

我的标签

随笔分类