JS(DOM)

最新推荐文章于 2024-06-10 22:18:41 发布

ccL-

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量14

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/2301_77148945/article/details/134114530

版权

简介

什么是API？
应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，
用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。
例如console.log方法。就是JS的一个API。

文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。
翻译：对HTML内部的标签进行处理。

--> <h3 id="c" name="b">我是h3标签</h3>
<h3 class="a">我是h3标签</h3>
<h3 class="a">我是h3标签</h3>

<p name="b" class="a">我是p标签</p>

<script>

通过DOM节点获取HTML元素的4种方法

每种方法都要掌握.非常相似.

//方法1:通过标签名获取元素
var a = document.getElementsByTagName("h3");
//此时就已经获取到了页面上所有的h3标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
//至于怎么去处理,就是后续的任务.

//方法2:通过class名获取元素
var b = document.getElementsByClassName("a");
//此时就已经获取到了页面上所有的class为a标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

//方法3:通过name获取元素
var c = document.getElementsByName("b");
//此时就已经获取到了页面上所有的class为a标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

//方法4:通过id获取元素因为id是唯一标识符所以返回的是一个元素,可以直接处理
var d = document.getElementById("c");

常见的操作节点的三个属性：

1.innerText表示给标签内部重新赋值或取值这里是文本值

2.innerHtml表示给标签内部重新赋值或取值这里是html值


注意以上2个方法只能作用于非表单元素例如 h标签 a标签 p标签等等

//第三个方法只能作用于表单元素
例如input

方法3： value表示给标签内部重新赋值或取值这里是html值


*/


// var a = document.getElementsByTagName("h3");
// for(var i = 0 ;i<a.length;i++){
// console.log(a[i].innerText);//表示获取各个h3标签内部的文本值
// a[i].innerHTML = "<a href='#'>你好</a>";
// }



// var b = document.getElementsByClassName("a");
// for(var i = 0 ;i<b.length;i++){
// console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值
// }





var d = document.getElementById("abc");
// d.value = "账号123";
console.log(d.value);

如何改变一个节点的样式:

var p = document.getElementById("abc");
//
//步骤1.思考需要修改什么样式
//步骤2.去css里面查看该样式的单词
//步骤3.按照提示来
//步骤4.通过节点.style.xxx 表示取值或赋值


//例如我要修改字体颜色
// p.style.color = "red";
// console.log(p.style.color)

//例如我要修改背景色
// p.style.backgroundColor = "green"



//以上写法的缺点: 麻烦每次只能修改一个样式

//所以: 如果样式很多,我们可以先将其封装到一个css里面
p.className = "abcd";//表示给该元素赋予一个class为abcd的属性

事件管理

// //鼠标移出事件onmouseout
// document.getElementsByTagName("img")[0].onmouseout = function(){
// document.getElementsByTagName("img")[0].style.width = "200px";
// document.getElementsByTagName("img")[0].style.height = "200px";
// }


//输入账号,失去焦点就需要数据校验

document.getElementById("aaa").onblur = function(){
var str = document.getElementById("aaa").value;
if(str.length >10){
document.getElementById("bbb").innerText = "长度太长了";
document.getElementById("bbb").style.color = "red";
}else{
document.getElementById("bbb").innerText = "数据合格";
document.getElementById("bbb").style.color = "green";
}

js获取元素的属性：

//元素的常见属性: id class src href

//需求:点击按钮让这个a标签的href改成跳转到第二个页面
//需求点击按钮,进入下一张图片
document.getElementById("abc").onclick = function(){
document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");
document.getElementById('b').setAttribute("src","img/2.PNG");
}



//点击开始点名按钮来回切换
document.getElementById("btn").onclick = function(){
if(document.getElementById("btn").innerText=="开始点名"){
document.getElementById("btn").innerText = "停止点名"
}else{
document.getElementById("btn").innerText = "开始点名"
}
}

迷你点名系统

<font id="1">张三1</font>
<font id="2">张三2</font>
<font id="3">张三3</font>
<font id="4">张三4</font>
<font id="5">张三5</font>
<hr>
<button id="btn">开始点名</button>

<script>

document.getElementById("btn").onclick = function(){
if(document.getElementById("btn").innerText=="开始点名"){
document.getElementById("btn").innerText = "停止点名"
//让5个名字对应的font标签的背景色改变
var r =Math.ceil(Math.random()*5);//(0,5)
document.getElementById(r).style.backgroundColor = "red";

}else{
document.getElementById("btn").innerText = "开始点名"
}

}

ccL-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS(DOM)

什么是API？应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。例如console.log方法。就是JS的一个API。文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。翻译：对HTML内部的标签进行处理。--> <h3 id="c" name="b">我是h3标签</h3>
复制链接

扫一扫