目录
onmouseover 鼠标移入 /onmouseout 鼠标移出 和 onmouseenter 鼠标进入 / onmouseleave 鼠标离开
一.元素的获取方式
文档下获取
只要在文档中符合都会获取到
id获取
-
基本语法:document.getElementById(id值);
-
document:文档,表示获取的范围
-
get:获取 Element:元素 By:通过..
-
返回的是元素对象
-
-
返回值:获取到了返回具体的元素,获取不到返回null
-
用过id获取只能在document下获取,不能自定义获取范围
var box = document.getElementById("box1");
console.log(box);//<div id="box1">我是DIV</div>
var box = document.getElementById("box2");
console.log(box); //null
var myH2 = document.getElementById("my-h2");
console.log(myH2);
类名获取(className)
-
基本语法:document.getElementsByClassName(类名值);
-
document:文档,表示获取的范围
-
get:获取 Elements:元素(复数) By:通过..
-
得到的元素对象是动态的伪数组
-
可以通过遍历的形式打印出来
-
-
返回值:获取到了:返回一个元素集合 HTMLCollection,这个集合由索引和值组成,0对应第一项,1对应第二项依次类推,天生自带length属性,最后一项的索引是集合.length -1; 获取不到 返回一个空集合 长度是0
-
length属性 集合的长度 或 集合中元素的个数
-
集合.length;
-
-
获取集合中具体元素
-
集合[索引]
-
var tests = document.getElementsByClassName("test");
console.log(tests);
console.log(tests.length); //获取长度
// 直接输出到控制台
console.log(tests[0]);
console.log(tests[1]);
console.log(tests[tests.length - 1]);
// 存储起来
var oDiv = tests[0];
var oH2 = tests[1];
console.log(oDiv, oH2);
var test1 = document.getElementsByClassName("test1");
console.log(test1, test1.length);
console.log(test1[0]);
console.log(test1[1]); //没有这个小标或索引 相当于集合中这个位置还没有初始化,或未定义 返回undefined
var hello = document.getElementsByClassName("hello");
console.log(hello, hello.length);
console.log(hello[0]); //undefined
标签名(tagName)
-
基本语法:document.getElementsByTagName(标签名);
-
document:文档,表示获取的范围
-
get:获取 Elements:元素(复数) By:通过..
-
-
返回值:获取到了:返回一个元素集合 HTMLCollection,这个集合由索引和值组成,0对应第一项,1对应第二项依次类推,天生自带length属性,最后一项的索引是集合.length -1; 获取不到 返回一个空集合 长度是0
-
length属性 集合的长度 或 集合中元素的个数
-
集合.length;
-
-
获取集合中具体元素
-
集合[索引]
-
var oLis = document.getElementsByTagName("li");
console.log(oLis);
// 获取长度
console.log(oLis.length);
// 获取具体的元素
console.log(oLis[0]);
console.log(oLis[1]);
console.log(oLis[2]);
console.log(oLis[oLis.length - 1]);
根据name获取
- document.getElementsByName(name) 返回在文档范围内具有给定 name 特性的元素。很少使用。
总结
方法名 |
搜索方式 |
可以在元素上调用? |
实时的? |
querySelector |
CSS- |