Web前端学习 第3章 JavaScript基础教程14 DOM基础
原创Web前端学习 第3章 JavaScript基础教程14 DOM基础
原创
一、DOM的基本概念
本章节可谓是相当重要了,是让JavaScript灵动起来必不可少的一步
- 文档对象模型
- 定义了树状结构
- 定义了接口，可以用来操作树状结构
二、样式操作
我们可以通过DOM提供的querySelector方法来获取元素，然后进一步操作它的样式 示例代码如下:
1 <h1>DOM样式测试</h1>
2 <script>
3 var h1 = document.querySelector("h1");
4 //querySelector的返回值是一个DOM对象，该方法可以通过选择器获取元素，若选择器找到多个元素，则返回第一个。
5 h1.style.color = "red";
6 //DOM对象的style属性可以设置元素内联样式。
7 </script>若需要通过js设置多个元素的样式，可以使用querySelectorAll方法， 示例代码如下:
1 <ul>
2 <li>香蕉</li>
3 <li>苹果</li>
4 <li>鸭梨</li>
5 </ul>
6 <script>
7 var ali = document.querySelectorAll("li");
8 //querySelectorAll方法的返回值是一个类数组的集合，里面保存的是获取的所有元素，所以如果希望为每一个元素设置样式，需要遍历这个集合。
9 for(var i = 0;i<ali.length;i++){
10 ali[i].style.color = "red";
11 }
12 </script>三、绑定事件
事件就是文档或者浏览器窗口发生的一些特定的交互瞬间，例如：用户点击网页会触发点击事件（onclick），用户在元素上移动会触发鼠标移动事件（onmouseover）,鼠标移出(onmouseout)又恢复原本模样等。下面我们来定义一个点击事件，当我们点击一个按钮的时候，弹出"hello world" 示例代码如下:
1 <button>按钮</button>
2 <script>
3 var btn = document.querySelector("button");
4 btn.onclick = function(){
5 console.log("hello world");
6 }
7 </script>我们将一个函数赋值给一个事件，当这个事件被触发的时候，这个函数就会被执行。
四、操作属性
我们可以通过JavaScript获取和设置元素属性，例如input的value属性值，或者img的src属性。
首先我们来实现一个效果，在文本框中输入字符串，然后点击按钮用在控制台输出我们输入的字符串 示例代码如下:
1 <input type="text">
2 <button>输出</button>
3 <script>
4 var input = document.querySelector("input");
5 var btn = document.querySelector("button");
6 btn.onclick = function(){
7 var text = input.value; //获取input的value属性
8 console.log(text);
9 }
10 </script>我们还可以通过赋值的方式为一个元素设置属性,可以切换所示图片 示例代码如下：
1 <img src="images/0210_logo.jpg" alt="">
2 <button>切换图片</button>
3 <script>
4 var img = document.querySelector("img");
5 var btn = document.querySelector("button");
6 btn.onclick = function(){
7 img.src = "images/0210_img.jpg";
8 }
9 </script>当点击按钮的时候，通过赋值的方式把另一张图片的地址赋值给img标签的src属性，就实现了图片切换的效果
五、数学计算案例
下面我们来实现一个能完成数学计算的程序，页面有四个文本框和一个按钮，我们在第一个文本框输入一个数字，在第二个文本框输入一个操作符，第三个文本框再输入一个数字，然后当我们点击计算按钮的时候，会在第四个文本框计算出结果,这个例子和我们学习switch语句的时候写的例子很像，但是那时候我们没有可操作的页面，现在我们把计算功能写在一个函数中。 示例代码如下:
1 <input type="text" id="num1">
2 <input type="text" id="sign">
3 <input type="text" id="num2">
4 <input type="text" id="result">
5 <button>计算</button>
6 <script>
7 var num1 = document.querySelector("#num1");
8 var sign = document.querySelector("#sign");
9 var num2 = document.querySelector("#num2");
10 var result = document.querySelector("#result");
11 var btn = document.querySelector("button");
12 btn.onclick = function(){
13 var n = Number(num1.value); //将字符串类型转换成数字类型
14 var m = Number(num2.value);
15 var r = count(n,sign.value,m);
16 result.value = r;
17 }
18 function count(n,s,m){ //n是第一个数字，s是操作符，m是第二个数
19 switch(s){
20 case "+":return n+m;break;
21 case "-":return n-m;break;
22 case "*":return n*m;break;
23 case "/":return n/m;break;
24 }
25 }
26 </script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。