简单JS的笔记查找节点+事件

最新推荐文章于 2021-08-12 12:22:26 发布

珍珠奶茶爱好者

最新推荐文章于 2021-08-12 12:22:26 发布

阅读量877

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/clmmei_123/article/details/81135325

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、一般的，查找一个元素节点用到的语句：

1、根据元素的id来查找 ---》elementId

document.getElementById(elementId);

2、根据元素的class属性 ---》className

document.getElementsByClassName(className);

3、根据元素（即标签）的标签名 ---》 tagName

document.getElementsByTagName(tagName);

4、根据选择器secletor，（这个与标签名有些类似）

document.querySelector(tagName);
    document.querySelectorAll(tagName);

注：

document.querySelector(""); 是在DOM树下找到的第一个与之匹配的元素节点

document.querySelectorAll(""); 是在DOM树下全部与之匹配的元素节点

二、js 的运行是至顶向下的

三、JavaScript HTML 事件

1、onload 和 onunload 事件：会在用户进入或离开页面时被触发，（即 onload：页面加载时 onunload：关闭页面时触发）

window.onload=function(){ 代码 };

页面加载的时候，触发该语句。

2、onchange事件：常结合对输入字段的验证来使用（有点像元素节点获得焦点后，再失去焦点。这个过程结束后，触发事件）

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
//a-z（ascii码）:97-122
if(x.value>='a'&&x.value<='z'){
   x.value=x.value.toUpperCase();
}else
   //x.value>'A'&&x.value<'Z' A-Z（ascii码）:65-90
   x.value=x.value.toLowerCase();
}
</script>
</head>
<body>

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写或小写的函数。</p>

</body>
</html>

这个例子是大小写字母转换，当你输入一个字母后，会触发οnchange=“myFunction()”，输入文本转换字母大小写

3、onmouseover 和 onmouseout 事件：可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数

onmouseover事件触发是，需要改变样式的话，可以用element:hover{ css样式 } （element可以是元素，id，class属性）

4、onmousedown、onmouseup 以及 onclick 事件

onmousedown：点击鼠标按钮时触发

onmouseup：松开鼠标按钮时触发

onclick：完成鼠标点击时触发

（好像平常的页面也不经常看到onmousedown 和 onmouseup 事件。用得最多的就是 onclick 事件）

5、onfocus 和onblur （一般用在文本输入框）

onfocus：元素获取焦点时触发

onblur：元素失去焦点时触发

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x){
   x.style.background="yellow";
}
function blurFunction(y){
   y.style.background="white";
   document.querySelector("input").value="";
}
</script>
</head>
<body>

请输入英文字符：<input type="text" onfocus="myFunction(this)" onblur="blurFunction(this)">
<br>
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
<p>当输入字段失去焦点时，会触发改变背景颜色的函数，并且将文本框内的文本清空。</p>

</body>
</html>

当你点击文本框的时候，获取焦点；当你点击其他地方的时候，文本框失去焦点。