DOM 方法 以及 DOM的增删减改

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

一. DOM 方法

这里讲解一些DOM的基本方法，叫你如何获取HTML标签：

在document中有一个属性body，他保存的是body的引用

var body = document.body;

document.documentElement保存的是html根标签

var html = document.documentElement;

//document.all 表示页面中所有元素 all可以用*表示

var all = document.all;
var all1 = document.getElementsByTagName(’*’);

根据元素的class属性值查询一组元素节点对象

document.getElementsByClassName 可以根据class属性获取一组元素节点对象

var box1 = document.getElementsByClassName(‘box1’);

获取页面中所有div

var div = document.getElementsByTagName(‘div’);

获取class为box1中所有的div
.box div
document.querySelector()

需要一个选择器的字符串作为参数，可以根据一个css选择器查询一个元素节点对象

使用该方法只会放回一个元素，即便是满足条件的元素有多个也只会返回第一个

var div1 = document.querySelector(".box1 div");

document.querySelectorAll()
该方法和document.querySelector()相似，不同的是该方法会返回一个数组
即使符合条件的只有一个元素也会包装到一个数组中返回

var div = document.querySelectorAll(".box1 div");

二.DOM的增删减改

创建一个节点

myClick(‘id’,function(){});

创建一个元素节点对象，需要标签名作为参数，将会根据标签名创建元素节点对象并将创建好的节点作为返回值返回

ocument.createElement();

创建一个文本节点对象需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

document.createTexeNode()

insterBefore()

- 可以在指定的子节点前插入新的子节点
- 语法  ：父节点.insertBefore(新节点，旧节点);
- parentNode 获取子节点的父节点

replaceChild替换节点

-使用指定的子节点替换旧节点

removeChild 删除子节点

-父节点.removeChild(子节点);