js- DOM基础

目录：

一、DOM的基本概念

二、样式操作

三、绑定事件

四、操作属性

---

一、DOM的基本概念

• 文档对象模型

• 定义了树状结构

• 定义了接口，可以用来操作树状结构

 

二、样式操作

我们可以通过DOM提供的querySelector方法来获取元素，然后进一步操作它的样式 示例代码如下:

<h1>DOM的样式操作</h1>
<script>
    var h1 = document.querySelector("h1");  
    //querySelector的返回值是一个DOM对象，
    //该方法可以通过选择器获取元素，若选择器找到多个元素，则返回第一个。
    h1.style.color = "pink"; 
    //DOM对象的style属性可以设置元素内联样式。
</script>

    若需要通过js设置多个元素的样式，可以使用querySelectorAll方法， 示例代码如下:

<ul>
    <li>手机</li>
    <li>电脑</li>
    <li>平板</li>
    <li>空调</li>  
</ul>
<script>
    var ali = document.querySelectorAll("li");
    //querySelectorAll方法的返回值是一个类数组的集合，
    //里面保存的是获取的所有元素，所以如果希望为每一个元素设置样式，需要遍历这个集合。
    for(var i = 0;i<ali.length;i++){
        ali[i].style.color = "skyblue";
    }
</script>

 

三、绑定事件

事件就是文档或者浏览器窗口发生的一些特定的交互瞬间，例如：用户点击网页会触发点击事件（onclick），用户在元素上移动会触发鼠标移动事件（onmouseover）,鼠标移出(onmouseout)又恢复原本模样等。下面我们来定义一个点击事件，当我们点击一个按钮的时候，弹出"hello world" 示例代码如下:

<button>按钮</button>
<script>
    var btn = document.querySelector("button");
    //给按钮绑定一个点击事件
    btn.onclick = function(){
        console.log("hello world");
    }
</script>

 我们将一个函数赋值给一个事件，当这个事件被触发的时候，这个函数就会被执行。

四、操作属性

我们可以通过JavaScript获取和设置元素属性，例如input的value属性值，或者img的src属性。

首先我们来实现一个效果，在文本框中输入字符串，然后点击按钮用在控制台输出我们输入的字符串 示例代码如下:

<input type="text">
<button>输出</button>
<script>
    var input = document.querySelector("input");
    var btn = document.querySelector("button");
    btn.onclick = function(){
        var text = input.value;    //获取input的value属性
        console.log(text);
    }
</script>

 

我们还可以通过赋值的方式为一个元素设置属性,可以切换所示图片 示例代码如下：

当点击按钮的时候，通过赋值的方式把另一张图片的地址赋值给img标签的src属性，就实现了图片切换的效果

<img src="img/h5.png" alt="">
		<button>切换图片</button>
		<script>
		    var img = document.querySelector("img");
		    var btn = document.querySelector("button");
		    btn.onclick = function(){
		        img.src = "img/h6.png";
		    }
		</script>