DOM的介绍和相关操作

目录

一、什么是DOM？

二、DOM中常见的四个方法

三、其他获取元素方法

四、创建元素方法

---

一、什么是DOM？

1.文档：DOM中的”D“

DOM是”Document Object Model“（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，DOM悄然而生。它将根据你编写的网页文档创建一个文档对象。

2.对象：DOM中的”O“

”对象“是一种独立的数据集合。

• JavaScript中的对象分为三类：

用户定义对象：由程序员自行创建的对象。

内建对象：内建在JavaScript语言里的对象，如Array对象。

宿主对象：由浏览器提供的对象。

• window对象

在JavaScript语言的发展初期，经常用到一些宿主对象，当中最基础的是window对象。

window对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为BOM（浏览器对象模型）。

3.模型：DOM中的”M“

含义：是某种事物的表现形式

二、DOM中常见的四个方法

1.getElementById()

这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。

这个对象是和document对象相关联的函数。

document.getElementById('id');//这个id值必须放在单引号或者是双引号里

2.getElementsByTagName()

这个方法将返回一个对象数组。

var arr=document.getElementsByTagName('tagname');
//单引号里面是标签的名字
var all=document.getElementsByTagName("*");
//“*”是通配符，即能得到所有元素标签所对应的对象组成的对象数组
//注意！“*”一定要用双引号包裹，为的是和乘号“*”区分开来
alter(all.length);//获得文档中元素节点的总数量

• 将getElementById()方法和getElementsByTagName()方法结合起来用

//如果想知道id属性值是purchase的元素包含着多少个列表项（li）/元素节点
var shopping = document.getElementById('purchase');
var items = shopping.getElementsByTagName("*");
alter(items.length);

ps：文档中所有的元素节点都是一个对象。

3.getAttribute()

查询对象的各种属性的值，该方法是个函数，只有一个参数——打算查询的属性的名字：object.getAttribute(attribute)

从函数调用方法可以看出：getAttribute()方法不能通过document对象调用，我们只能通过一个元素节点对象调用它。

//得到p标签对应的对象数组
var paras = document.getElementsByTagName('p');
for (var i =0;i<paras.length;i++){
    //用弹窗显示p元素中title属性的值，如果p元素中没有title这个属性，那么得到的返回值是null（空值）
    var title_value = paras[i].getAttribute("title");
    //如果属性值不为空就用弹窗显示
    if(title_value){
        alter(title_value);
    }
}

4.setAttribute()

它允许我们对属性节点的值作出修改。

与getAttribute()方法相同，只能通过一个元素节点对象进行调用，但是setAttribute()方法需要传递两个参数：object.setAttribute(attribute,value)

//把id为purchase的元素赋值给shopping
var shopping = document.getElementById('purchase');
//修改前
alter(shopping.getAtttibute("title"));
shopping.setAttribute("title","a list of goods");
//修改后
alter(shopping.getAtttibute("title"));

注意：

• 如果我们得到的现有对象中没有相应的属性（属性原先并不存在），那么setAttribute()调用会做两件事情：先把这个属性创建出来，然后再对其进行赋值；如果属性已存在，那么这个属性的当前值会被覆盖掉。

• setAttribute()方法做出的修改不会反映在文档本身的源代码中，这种行为源于DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不会影响文档的静态内容。

三、其他获取元素方法

1.getElementsByClassName()

document.getElementsByClassName()方法返回一个对象数组，这个数组中包括了所有class名字符合指定条件的元素。

//获取对象
var items = document.getElementsByClassName('classname');
//读取元素
console.log(items[0]);
//修改页面内容
items[0].innerHTML = "Hello World!";
console.log(items[0]);

2.getElementsByName()

该方法用于选择拥有name属性的HTML元素（比如<form>、<img>、<input>等），返回值为一个类似数组的对象，因为name属性值相同的元素可能不止一个。

//<form name="login"> </form>
//获取表单
var name = document.getElementsByName("login");
console.log(name);

3.querySelector()

document.querySelector()方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector('.myclass');

4.querySelectorAll()

document.querySelectorAll()和document.querySelector()方法类似，不同在于其返回值是一个类似数组的对象。

var el1 = document.querySelectorAll('.myclass');
console.log(el1[0]);

四、创建元素方法

1.createElement()

document.createElement()方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement('div');
console.log(newDiv);
//<div></div>

2.createTextNode()

document.createElement()方法用来生成文本节点，并返回该节点。它的参数是文本节点的内容。

var Div = document.createElement('div');
var text = document.createTextNode("Hello");
​
//将文本节点塞到元素节点中---->appendChild:将内容或者子元素放进容器中
Div.appendChild(text);
console.log(Div);
//<div>Hello</div>

3.createAttribute()

document.createAttribute()方法生成一个新的属性节点，并返回它。

//生成属性
var 变量名 = document.createAttribute("属性名");
//属性赋值
变量名.value = "属性值";
//往元素节点中加入属性
元素节点.setAttributeNode(变量名);

//例子：
    var Div = document.createElement('div');
    //创建id属性
    var id = document.createAttribute("id");
    //给属性赋值
    id.value = "root";
    //将属性节点塞到标签里
    Div.setAttributeNode(id);
    console.log(Div);

4.appendChild()方法

把新创建的节点插入某个文档的节点。

//语法
parent.appendChild(child)