我们想要操作元素,首先需要获取元素
元素的获取方式
-
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";