如何通过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标签等等
//第三个方法只能作用于表单元素
例如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);
如何操作节点的样式
//如何改变一个节点的样式:
//步骤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的属性