javascript的基础交互详解 javascript的基础交互详解

一.元素的获取方式

文档下获取

id获取
类名获取（className）
标签名（tagName）

自定义获取范围

二.鼠标事件

区别：

三.元素操作

1.操作元素内容

操作表单元素内容
操作普通闭合标签

2.操作元素属性

总结

一.元素的获取方式
文档下获取
只要在文档中符合都会获取到

id获取

基本语法：document.getElementById(id值);
- document：文档，表示获取的范围
- get：获取 Element：元素 By:通过..
- 返回的是元素对象
返回值：获取到了返回具体的元素，获取不到返回null
用过id获取只能在document下获取，不能自定义获取范围

var box = document.getElementById("box1"); console.log(box); //我是DIVvar box = document.getElementById("box2"); console.log(box); //nullvar 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]); //没有这个小标或索引相当于集合中这个位置还没有初始化，或未定义返回undefinedvar 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]);

自定义获取范围
父级元素：必须是具体的元素

父级元素.getElementsByClassName(类名值);
父级元素.getElementsByTagName(标签名);

// 获取ol下的li// 获取父级元素var wrap = document.getElementById("wrap"); console.log(wrap); // var oLis = wrap.getElementsByClassName("test"); var oLis = wrap.getElementsByTagName("li"); console.log(oLis); console.log(oLis.length); console.log(oLis[0]); console.log(oLis[1]); console.log(oLis[oLis.length - 1]); // 获取ul下的li// 获取父级var wrap1 = document.getElementsByClassName("wrap"); console.log(wrap1); console.log(wrap1[0]); console.log(wrap1[1]); // var ullis = wrap1[1].getElementsByClassName("test"); var ullis = wrap1[1].getElementsByTagName("li"); console.log(ullis); console.log(ullis.length); console.log(ullis[0]); console.log(ullis[1]); console.log(ullis[ullis.length - 1]);

二.鼠标事件 【javascript的基础交互详解】绑定事件也要是具体的元素，不能够直接去操作集合

onclick 单击事件
ondblclick 双击事件
onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动
oncontextmenu 鼠标右击
onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标进入
onmouseleave 鼠标离开

1
2
3

onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标进入
onmouseleave 鼠标离开

区别：
onmouseover及onmouseout不仅会触发自身这个事件对应的事情还会将父级这个事件对应做的事情再次触发
onmouseenter及onmouseleave：只会触发自身这个事件对应做的事情，不会触发父级这个事件对应做的事情

三.元素操作原则：给值就是设置，不给值就是获取
元素的所有操作都必须是具体的元素,集合不能直接操作

1.操作元素内容
从元素中获取到的内容都是字符串，没有内容获取到的是空字符串

操作表单元素内容

设置：表单元素.value = https://www.it610.com/article/值;
获取：表单元素.value;

// 多次赋值后边覆盖前边的

// 获取元素var inputs = document.getElementsByTagName("input"); var btn = document.getElementsByTagName("button")[0]; console.log(inputs, btn); // 将两个输入框的和展示到第三个输入框// 绑定事件// 事件每点击一次函数中代码就重新执行一次btn.onclick = function () { //做什么事情// 获取两个输入框的值var oneVal = inputs[0].value; var twoVal = inputs[1].value; console.log(oneVal, twoVal); // 遇到字符串表示拼接先转为数字var total = parseFloat(oneVal) + parseFloat(twoVal); console.log(total); // 将和设置给第三个输入框inputs[2].value = https://www.it610.com/article/total; }

操作普通闭合标签

设置：表单元素.innerText/innHTML = 值;
获取：表单元素.innerText/innHTML;
区别：innerText只能识别文本，而innHTML既可以识别文本，又可以识别标签

var div = document.getElementsByTagName("div")[0]; var h2 = document.getElementsByTagName("h2")[0]; var p = document.getElementsByTagName("p")[0]; console.log(div, h2,p); // 设置：表单元素.innerText/innHTML = 值; // 后边设置的覆盖前边的// div.innerText = "我是div"; // div.innerText = "我是div"; // div.innerHTML = "我是div"; div.innerHTML = "我是div"; h2.innerHTML = "我是H2"; // 获取：表单元素.innerText/innHTML; console.log(div.innerText); //我是divconsole.log(div.innerHTML); //我是divconsole.log(p.innerText); console.log(p.innerHTML);

2.操作元素属性
操作结构上天生自带的属性

设置：元素.属性 = 值; 获取不到返回空字符串
获取：元素.属性；

元素.id = 值; /元素.id;
元素.className = 值; /元素.className;
元素.title = 值; /元素.title;
...

// 获取元素var div =document.getElementsByTagName("div")[0]; // 设置div.className = "myBox"; div.title = "我是div"; // 获取console.log(div.id); console.log(div.className); console.log(div.title);

总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！