目录
一、什么是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)