JavaScript中的基本交互

浮生_Lee

已于 2023-03-19 19:18:00 修改

阅读量537

点赞数 1

分类专栏： # JavaScript 文章标签： javascript 前端 html

于 2023-03-17 23:05:27 首次发布

本文链接：https://blog.csdn.net/qq_58192905/article/details/129626621

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

交互三步曲：获取标签，添加事件，事件发生时的反馈

一、获取标签

1.通过id获取

语法:

document.getElementById("id名")：获取到的是一个唯一标签

//通过id获取元素
var FS = document.getElementById("fs");
//添加事件  标签.onclick = function(){  事件发生时要执行的操作  }
FS.onclick = function(){
    alert("easy");
}

2.通过标签名获取

语法：

document.getElementsByTagName("标签名") ：获取整个文档中对应标签名的标签

父元素.getElementsByTagName("标签名") ：获取对应父元素中对应标签名的标签

//通过标签名获取元素:document.getElementsByTagName("标签名")
var LI = document.getElementsByTagName("li");
console.log(LI); //HTMLCollection(5)  元素集合
console.log(LI.length); //5  获取元素集合的个数
console.log(LI[2]); //通过下标获取元素，下标从0开始

//元素集合是一个整体，必须通过下标一个一个取出来使用
LI[2].onclick = function(){
    alert("hello world");
}
LI[1].onclick = function(){
    alert("hello world");
}
//父元素.getElementsByTagName("标签名") ： 获取对应父元素中对应标签名的标签
var FS = document.getElementsByTagName("fs")[1];
var LI = FS.getElementsByTagName("li");
console.log(LI);

3.通过类名获取（IE 8不兼容）

语法：

document.getElementsByClassName("类名") ：获取整个文档中对应类名的标签

父元素.getElementsByClassName("类名") ：获取对应父元素中对应类名的标签

//通过类名获取元素：IE8-不兼容
var LI = document.getElementsByClassName("box");
LI[0].onclick = function(){
    alert("浮生");
}

<注意>

通过class和标签获取的都是元素集合，不管是几个元素都不能直接使用，必须通过下标获取到具体的元素进行操作==

二、添加事件

1.事件

添加在标签上，可以被浏览器监听到的一些行为

2.语法

标签.事件 = function(){

事件触发时执行的代码

}

3.鼠标事件

onclick：点击
onmouseover/onmouseenter：鼠标移入(悬停)
onmoueout/onmouseleave：鼠标移出
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmousedown：鼠标按下
ondblclick ：双击
oncontextmenu：右击

//添加事件  标签.事件名 = function(){ 事件发生时执行的操作 }
Div.onclick = function(){
    console.log("pink");
}

//onmouseover：鼠标移入
Div.onmouseover = function(){
    console.log("鼠标移入");
}

三、JavaScript操作标签

<div id=‘box’ class='box'>内容</div>
样式：height width

1.操作标签内容

1.1标签内容

开始标签和结束标签中间的都是标签内容

1.2操作表单元素内容

获取内容： var 变量 = 表单元素.value

设置内容：标签.value = "值"

//给button添加点击事件
Btns[0].onclick = function(){
//获取输入框的值  ：var 变量 = 表单元素.value
    var v = Inp.value;
    console.log(v);
}
//设置
Btn[1].onclick = function(){
// 设置内容： 标签.value = "值"
    Inp.value = "hello world";
}

//所有的表单元素都是  标签.value
var v = Sel.value;
console.log(v);

1.3操作闭合标签内容

获取：var 变量 = 标签.innerHTML / 标签.innerText
设置：标签.innerHTML / 标签.innerText = “值”
innerHTML和innerText

        都是操作闭合标签内容，都会覆盖原有的内容
        innerHTML能识别标签，innerText不能识别标签

/* 
  获取：var 变量 = 标签.innerHTML  /  标签.innerText
  设置：标签.innerHTM  /  标签.innerText = “值”

  innerHTML：识别标签,覆盖原有的内容
  innerText：只操作文本不识别标签,覆盖原有的内容
*/
//1.获取元素
var Div = document.getElementsByTagName("div")[0];

//2.获取标签内容
var html = Div.innerHTML;
console.log(html); //  <p>代码之难，难于上青天</p>
var text = Div.innerText;
console.log(text); // 代码之难，难于上青天

//3.设置标签内容，覆盖原有内容
//Div.innerHTML = "<p>蚕丛及鱼凫，开国何茫然！</p>";
//Div.innerText = "<p>蚕丛及鱼凫，开国何茫然！</p>";

//4.追加    之前的 + 现在的
//Div.innerHTML = Div.innerHTML + "<p>蚕丛及鱼凫，开国何茫然！</p>";
Div.innerHTML += "<p>蚕丛及鱼凫，开国何茫然！</p>";

2.操作标签属性

<div id class title > 开始标签中的属性

获取： var 变量 = 标签.属性名
设置：标签.属性名 = 属性值
特殊：class是关键字，不能直接使用，class---className

//1.获取元素
var Div = document.getElementsByTagName("div")[0];

//2.获取 var 变量 = 标签.属性名
var s = Div.title;
console.log(s);

//3.设置 标签.属性名 = 属性值
Div.id = "haha";

//4.设置class
Div.className = "curl";

3.操作标签样式

写在style标签中，width，height，background

3.1设置

标签.style.属性名 = 值

3.2特殊

js中不允许出现-，要使用驼峰标识

//2.设置元素样式 ： 标签.style.属性名 = 值  ,js操作标签样式都是行间
//width:200,height:200,background:green
Div.style.width = "200px";
Div.style.height = "200px";
Div.style.background = "yellow";

//特殊：js中不允许出现-，要使用驼峰标识
Div.style.fontSize = "20px";

3.3cssText

//获取元素
var Div = document.getElementsByTagName("div")[0];

//标签.style.cssText = "css样式"
// Div.style.cssText = "width:200px;height:200px;background:green";

//cssText重写style属性
// Div.style.cssText = "width:200px;background:green";
Div.style.width = "200px";
Div.style.background = "green";