DOM的基本操作

DOM的基本操作有哪些

一.什么是DOM

DOM document object model 文档对象模型
操作文档的一套方法 - 文档 - html
document是一个对象，是dom的顶级对象，属于window的一个对象

二.DOM元素的获取

事件 - 给谁的事件 - 标签 - id名可以直接代表这个标签
使用id名来代表标签，有bug的，不是很友好
直接获取他，不要使用id名
stop.οnclick=function(){
console.log(123);
}

var.οnclick=function(){
console.log(123);
}
根据id名来获取标签
document.getElementById(id名-字符串)
var a = document.getElementById(“var”);
console.log(a); 获取到的是什么？ 是一个对象 - dom元素

根据类型获取标签
document.getElementsByClassName(类名-字符串) */
var a = document.getElementsByClassName(“bbb”);

类名的获取方式，获取都的是一个集合，要得到具体的标签需要取下标
因为class类名不具有唯一性

console.log(a);
console.log(a[0]); 下标是什么样的规则？当前页面中第一个满足这个类型的元素，下标是0，第二个下标是1 …
console.log(a[1]);

根据标签名来获取
document.getElementsByTagName(标签名-字符串)
var a = document.getElementsByTagName(“button”);
console.log(a[0]);

通过name属性名来获取标签

document.getElementsByName(name属性的值-字符串);

var a = document.getElementsByName(“box”);
console.log(a);
console.log(a[0]);

通过css选择器来获取 - 更贴近于咱们习惯

document.querySelector(css选择器);
得到的是第一个满足css选择器的元素

var a = document.querySelector(".bbb");
console.log(a);

通过css选择器得到所有满足css选择器的元素
var all = document.querySelectorAll(".bbb");
console.log(all);

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
document.querySelector() – 必须记住
document.querySelectorAll()

兼容性
document.querySelector() – 必须记住
document.querySelectorAll()
document.getElementsByClassName()
在ie中不支持

三.DOM元素的属性操作

var box = document.querySelector(".box");
console.log(box);
可以给box添加一些属性

DOM元素.setAttribute(属性名,属性值)

box.setAttribute(“style”,“color:red”);
box.setAttribute(“name”,“张三”);
修改属性的值
相当于在重新设置
box.setAttribute(“name”,“人渣”);
删除某个属性
DOM元素.removeAttribute(属性名)
box.removeAttribute(“name”)
查看属性的值
DOM.getAttribute(属性名)
var a = box.getAttribute(“style”)
console.log(a);

设置属性：setAttribute
获取属性：getAttribute
删除属性：removeAttribute

四.DOM元素内容操作

var text = document.querySelector("[type=‘text’]");
btn.οnclick=function(){
//表单元素内容使用value属性来获取
console.log(text.value);
console.log(document.querySelector("[type=‘password’]").value);
console.log(document.querySelector("[type=‘radio’]").value);
console.log(document.querySelector(“select”).value);
}