DOM常用API

1、获取指定属性的值 标签中必须有写的

getAttribute(“href”)

var link = document.getElementById('link');
console.log(link.getAttribute("href"));

2、修改属性的值

setAttribute(“href”, “#top”)

var link = document.getElementById('link');
link.setAttribute("href", "#top");

3、判断是否包含该属性，返回值为布尔类型

hasAttribute(“title”)

var link = document.getElementById('link');
var bool = link.hasAttribute("title");
console.log(bool);

4、删除属性

removeAttribute(“class”)

var link = document.getElementById('link');
link.removeAttribute("class");

5、创建新元素 只在内存中

createElement(“a”)

var a = document.createElement("a");

6、在元素上追加子元素

appendChild(a)

document.body.appendChild(a);

7、插入：在现有的子元素之前加入新元素

insertBefore(span, strong)

var strong = document.getElementsByTagName("strong")[0];
var span = document.createElement("span");
div.insertBefore(span, strong);   //在获取的strong标签前面插入新创建的span标签

8、替换：替换现有的子元素

replaceChild(new_div, i)

var i = document.getElementsByTagName("i")[0];
var new_div = document.createElement("div");
div.replaceChild(new_div, i);   //把获取的i标签替换成新创建的new_div

9、删除元素

var div = document.getElementsByTagName("div")[0];
var p = document.getElementsByTagName("p")[0];
var strong = document.getElementsByTagName("strong")[0];
// 通过父元素删除
div.removeChild(p);
// 自删
strong.remove();