概述
我们想要操作元素，首先需要获取元素
元素的获取方式
-
id获取
-
基本语法：document.getElementById(“id值”);
-
通过id获取因为id是唯一的，所以我们我们限定获取范围是document
-
-
返回值：获取到返回具体的那个元素，获取不到返回null
-
HTML：
<div id="box"></div>
JS：
var myBox = document.getElementById("box");
console.log(myBox);
-
className获取
-
基本语法：父元素.getElementsByClassName("class值");
-
父元素：限定获取范围，可以是直接父级元素，也可以间接的父级元素 ，但是必须是具体的元素，不能是集合
-
返回值：获取到了返回HTMLCollection(n)，称之为元素集合，获取不到返回空集合，这个集合由下标和值组成，下标从0开始依次递增，天生自带length属性，表示元素集合的长度或集合中元素的个数
-
获取集合中具体的某一项
-
元素集合[下标]；
-
-
-
HTML：
<p class="test">1</p>
<p>2</p>
<p>3</p>
JS：
var oPs = document.getElementsByClassName("test"); // 获取文档下的
console.log(oPs); //HTMLCollection(3); 获取到的是一个元素集合
// 集合的长度 length
console.log(oPs.length); //3
// 获取集合中具体的某一项
console.log(oPs[0]);
console.log(oPs[1]);
-
标签名获取
-
基本语法：父元素.getElmentsByTagName(“标签名”);
-
父元素：限定获取范围，可以是直接父级元素，也可以间接的父级元素 ，但是必须是具体的元素，不能是集合
-
返回值：返回一个元素集合，这个集合由下标和值组成，下标从0开始依次递增，天生自带length属性，表示元素集合的长度或集合中元素的个数
-
获取集合中具体的某一项
-
元素集合[下标]；
-
-
-
HTML：
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
JS：
var lis = document.getElementsByTagName("li");
console.log(lis); //获取元素集合
console.log(lis.length); // 获取集合的长度 length
// 获取集合中具体的某一项 (具体元素) ：元素集合[下标]；
console.log(lis[0]);
console.log(lis[2]);
console.log(lis[10]); //undefined 相当于这个位置还没有定义，还没有初始化
鼠标事件
-
基本语法：具体元素.on事件类型
-
onclick:单击事件
-
ondblclick：双击事件
-
onmousedown:鼠标按下
-
onmouseup:鼠标抬起
-
onmousemove:鼠标移动
-
onmouseover:鼠标移入
-
onmouseout:鼠标移出
-
onmouseenter:鼠标进入
-
onmouseleave:鼠标离开
-
-
over和enter的区别
-
onmouseover - onmouseout 不仅会触发自身的这个事件还会触发父级对应的这个事件
-
onmouseenter - onmouseleave 只会触发自身的这个事件，不会将父级对应的这个事件触发
-
元素操作
规则：给值就是设置，不给值就是获取 ，所有操作都必须是具体的元素
操作元素内容
元素没有内容，获取到的是空字符，从元素中获取到都是字符串
-
操作表单元素内容
-
基本语法：表单元素.value =值; / 表单元素.value;
-
HTML：
<input type="text"/>
JS：
var input = document.getElementsByTagName("input")[0]; // 先获取
// 再设置：表单元素.value =值;
input.value = "哈哈哈哈哈";
input.value = 100; // 后边设置的会覆盖前边的
-
操作双标签内容
-
基本语法：双标签.innerText/innerHTML =值; / innerText/innerHTML;
-
区别：innerText只能识别文本，而innerHTML既可以识别，也可以识别标签
-
-
HTML：
<select>
<option>北京</option>
<option>上海</option>
</select>
JS：
var opts = document.getElementsByTagName("option");
opts[1].value = "测试";
// 获取的时候优先获取value值，没有value值获取内容值
console.log(opts[1].value); //测试
操作元素属性
操作的元素结构上天生自带的
语法：元素.属性= 值; / 元素.属性; 获取到了就是具体的值，是字符串，获取不到是空字符
-
id
-
className
-
title
-
....
HTML：
<div id="box">我是div</div>
JS：
// 获取元素
var div = document.getElementsByTagName("div")[0];
//设置
div.title = "hello";
//获取
console.log(div.title); // hello
操作样式
语法：元素.style.样式属性 = 值；/元素.style.样式属性;
通过style属性只能操作行内样式，行内样式没有获取到的是空字符串
HTML：
<div></div>
CSS：
div{
width: 300px;
}
JS：
// 多次设置 后边覆盖原来的
div.style.width ="400px";
div.style.width = "600px";
最后
以上就是酷酷时光为你收集整理的JavaScript基础——基础交互的全部内容，希望文章能够帮你解决JavaScript基础——基础交互所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复