这篇文章主要介绍“如何掌握javascript的基础交互”，在日常操作中，相信很多人在如何掌握javascript的基础交互问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何掌握javascript的基础交互”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
只要在文档中符合都会获取到
基本语法：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-h3");
console.log(myH2);基本语法：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基本语法：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]);绑定事件也要是具体的元素，不能够直接去操作集合
onclick 单击事件
ondblclick 双击事件
onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动
oncontextmenu 鼠标右击
onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标进入
onmouseleave 鼠标离开
<div id="box"></div>
<ul id="myUl">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var box = document.getElementById("box");
console.log(box);
var myUl = document.getElementById("myUl")
console.log(myUl);
var oLis = myUl.getElementsByTagName("li");
console.log(oLis);
// - onclick 单击事件
box.onclick = function() {
console.log("单击");
}
// - ondblclick 双击事件
oLis[0].ondblclick = function() {
console.log("双击事件");
}
// - onmousedown 鼠标按下
oLis[1].onmousedown = function() {
console.log("鼠标按下");
}
// - onmouseup 鼠标抬起
oLis[1].onmouseup = function() {
console.log("鼠标抬起");
}
// - onmousemove 鼠标移动
oLis[1].onmousemove= function() {
console.log("鼠标移动");
}
// - oncontextmenu 鼠标右击
oLis[2].oncontextmenu = function() {
console.log("鼠标右击");
}
// - onmouseover 鼠标移入
myUl.onmouseover = function() {
console.log("鼠标移入");
}
// - onmouseout 鼠标移出
myUl.onmouseout = function() {
console.log("鼠标移出");
}
// - onmouseenter 鼠标进入
myUl.onmouseenter = function() {
console.log("鼠标进入");
}
// - onmouseleave 鼠标离开
myUl.onmouseleave = function() {
console.log("鼠标离开");
}
</script>onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标进入
onmouseleave 鼠标离开
onmouseover及onmouseout不仅会触发自身这个事件对应的事情还会将父级这个事件对应做的事情再次触发
onmouseenter及onmouseleave：只会触发自身这个事件对应做的事情，不会触发父级这个事件对应做的事情
原则：给值就是设置，不给值就是获取
元素的所有操作都必须是具体的元素,集合不能直接操作
从元素中获取到的内容都是字符串，没有内容获取到的是空字符串
设置：表单元素.value = 值;
获取：表单元素.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 = total;
}设置：表单元素.innerText/innHTML = 值;
获取：表单元素.innerText/innHTML;
区别：innerText只能识别文本，而innHTML既可以识别文本，又可以识别标签
var div = document.getElementsByTagName("div")[0];
var h3 = document.getElementsByTagName("h3")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h3,p);
// 设置：表单元素.innerText/innHTML = 值;
// 后边设置的覆盖前边的
// div.innerText = "我是div";
// div.innerText = "<h7>我是div</h7>";
// div.innerHTML = "我是div";
div.innerHTML = "<h7><a href='https://www.baidu.com'>我是div</a></h7>";
h3.innerHTML = "我是H2";
// 获取：表单元素.innerText/innHTML;
console.log(div.innerText);//我是div
console.log(div.innerHTML);//<h7><a href="https://www.baidu.com">我是div</a></h7>
console.log(p.innerText);
console.log(p.innerHTML);操作结构上天生自带的属性
设置：元素.属性 = 值; 获取不到返回空字符串
获取：元素.属性；
元素.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);到此，关于“如何掌握javascript的基础交互”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
