DOM简介
什么是API?
应用程序编程接口(Application Programming Interface,API)是软件系统预先定义的接口,
用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。
例如console.log方法。就是JS的一个API。文档对象模型(Document Object Model,DOM)用于处理HTML文档的编程接口。
翻译:对HTML内部的标签进行处理。
如何通过DOM获取元素节点
通过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标签等等,第三个方法只能作用于表单元素
3.value表示给标签内部重新赋值或取值 这里是html值
JS中的事件
用户对前台页面做出的一些操作 来触发一些函数例如用户的单击 双击 等等等等
//需求:用户点击id为a的元素 弹出一个窗口 //步骤1:获取元素 // 步骤2: 元素.事件名 = function(){代码体} //步骤3 常见的事件名: //单击事件 onclick // document.getElementById("a").onclick = function(){ // alert(123); // } // //需求2:给所有的p标签加上点击事件 下面的写法是错误的 需要遍历 // // document.getElementsByTagName("p");.onclick = function(){ // // alert(123); // // } // var p = document.getElementsByTagName("p"); // for(var i = 0 ;i<p.length;i++){ // p[i].onclick = function(){ // alert(456); // } // }
JS的属性
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");