第十二节:DOM操作

一.简单的DOM操作

1.获取DOM元素

1.1通过ID获取

document.getElementById("myid");  // id是唯一的 

1.2通过类名来获取元素(获取到的是多个元素，会放在一个伪数组里)

var eles =  document.getElementsByClassName("box")[0];  // 类名可以有多个
console.log(eles);
eles.style.backgroundColor = "red";
// 注意 通过类名获取到的是多个元素 即使是一个元素也会被放在伪数组里

1.3通过标签来获取 getElementsByTagName

var eles = document.getElementsByTagName("div"); //通过标签名获取多个标签
console.log(eles);

2.简单的操作

2.1替换id为myid的div的内容 innerHTML :会解析html

 //1. 是覆盖替换  2.如果不替换 可以获取 innerHTML的值
 var ele =   document.getElementById("myid")
 ele.innerHTML = "<h1>我是替换的内容</h1>";
console.log(ele.innerHTML);

2.2替换标签里的文本内容 innerText ：不会解析html

// 1. 是覆盖替换  2.如果不替换 可以获取 innerText的值
var ele =   document.getElementById("myid");
ele.innerText = "<h1>我是替换的内容</h1>";
console.log(ele.innerText);

二.创建DOM元素

1.createElement

var p = document.createElement("p");  // 是一个元素对象 创建一个p标签 对象 和你直接获取的p标签对象是一样的；
p.innerHTML = "123";
console.log(p);
// console.log(str);
// 创建的元素对象添加到指定位置 
// 把创建的内容添加到body里面
//  注意：innerHTML后面需要接收的是字符串

2.如果想把对象添加到指定的位置 可以通过 appendChild

注意点：1.后面接收一个对象 2.追加一个标签元素（不会像innerHTML一样替换内容）

document.body.appendChild(p) ; // 在body里面添加一个子元素p标签
var p2 = document.createElement("p");
p2.innerHTML = "345";
document.body.appendChild(p2) ;
// innerHTML后面需要字符串  appendChild 后面需要一个元素对象
// document.body.innerHTML = "填充内容";  //替换所有的内容

三.DOM元素的获取

1.通过id来获取
var ele = document.getElementById(“myid”); //获取的是一个元素
2.通过类名来获取
var ele = document.getElementsByClassName(".box"); //获取到的是一个伪数组
3.通过标签名称获取
var eles = document.getElementsByTagName(“div”); // 获取到所有的div ，也是一个伪数组；
4.可以通过css选择器来获取
var ele = document.querySelector(".box"); // 只能获取一个元素 ，即使有多个元素 也只能获取第一个
console.log(ele);
var eles = document.querySelectorAll(".box"); // 会获取到所有符合条件的元素，放在一个伪数组里面
console.log(eles);

四.DOM的简操作

1.style

1.可以设置获取的样式 2.可以获取元素的样式

// 注意点：1.样式不支持 - 的写法 （需要把background-color转成 backgroundColor）
//        2. 只能操作行间样式
var boxEle = document.querySelector(".box");
//    console.log( boxEle.style.width);
boxEle.style.background = "blue";

2.className

用于操作元素的类名 ： 1.替换原有类名 2.获取元素的类名

// 注意： className 在设置的时候会覆盖之前的类名
// 通过js 给div加上一个“box”类名
var btn =  document.querySelector(".btn");
var divEle = document.querySelector("div");
btn.onclick = function(){
var cname = divEle.className;//    当点击btn的时候给div加上"box"类名
console.log(cname);
divEle.className = "box";  //设置div的类名为 box
divEle.className += " box";// 点击的时候要累加之前类名 
 }

3.操作属性

var divEle = document.querySelector(".active");
// 1.获取属性 :属性的值 =  元素 .getAttribute("属性名");
var attValue =  divEle.getAttribute("class");
console.log(attValue)
// 2.设置属性 元素.setAttribute("属性名","属性值");
document.querySelector("button").onclick = function(){
	divEle.setAttribute("addAttr","456");
}
// 3.删除属性： 元素.removeAttribute("属性名");
document.querySelector("button").onclick = function () {
	divEle.removeAttribute("myattr");
}

五.特殊的HTML标签

// 1.html标签： document.documentElement ；
// var htmlEle = document.querySelector("html");
// console.log(htmlEle);
// document.documentElement  //就是html元素的简写形式

// 2.body 标签： document.body

// 3.文档声明 ：document.doctype
// console.log(  document.doctype);

// 4.head ： document.head;
// console.log(document.head);

// 5.title：document.title : 注意获取的title里的内容,不是标签
// console.log(document.title);
// console.log(document.body);
// document.title = "555"; //可以直接设置title

// 6.获取input标签
var res =  document.getElementsByName("username");
console.log(res);