一、DOM简介
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档,它本身属于浏览器。
二、使用DOM查找HTML元素
HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。所以查找HTML中的某个标签即是查抄树上的某个节点。
1. 直接查找(通过属性、标签名等)
1 document.getElementById("i1"); //根据id获取单个元素 2 document.getElementsByName("i1"); //根据name属性获取多个元素 3 document.getElementsTagName('a'); //根据标签名称获取多个元素 4 document.getElementsByClassName('c1'); //根据class属性获取多个元素
2. 间接查找(通过已找到的其他标签)
1 tag = document.getElementById("i1"); 2 tag.parentElement // 父节点标签元素 3 tag.children // 所有子标签 4 tag.firstElementChild // 第一个子标签元素 5 tag.lastElementChild // 最后一个子标签元素 6 tag.nextElementSibling // 下一个兄弟标签元素 7 tag.previousElementSibling // 上一个兄弟标签元素
三、使用DOM操作标签
1. 操作标签内容
tag = document.getElementById("i1"); content = tag.innerText; //获取标签中的文本内容 tag.innerText = "new_content"; //将标签内部文本赋值为new_content
//使用innerText只能操作标签内部的文本内容,即使标签内部包裹了其他标签也会被其忽略 // 常用的操作标签内容的方法,使用方法同innerText innerText --- 仅文本 innerHTML --- 所有内容(包括标签) value: ---- 标签的值(下面分别是对有value属性的标签,使用value获取/操作值的详细介绍) input --- value获取当前输入的值 select --- 获取选中value的值(selectedIndex) textarea --- 获取当前输入的
2. 操作标签一般属性
obj = document.getElementById("i1"); obj.attributes //---- 获取标签的所有属性 obj.getAttributes(key) //---- 获取标签某个属性的值 obj.setAttributes(key, value) //---- 为标签设置属性 obj.removeAttributes(key) //---- 为标签移除属性
3. 操作标签class属性
tag = document.getElementById('i1') tag.className // 获取tag的使用的class选择器名称 tag.className = 'c1' // tag使用名为c1的class选择器 tag.classList.add('c2') // 给tag增添c2中的样式 tag.classList.remove('c3') // 移除tag使用的c3中的样式
4. 操作标签样式
// 在上面的操作class属性中,是对一个标签添加或删除一个css代码样式块, 对一个标签具体样式的操作如下 //比如,设置一个标签字体的大小 tag = document.getElementById("i1"); tag.style.fontSize = '16px'; // 其他的各种样式也是采用这种方式设置,设置时样式字段去掉'-',将每个单词的首字母大写(整体首字母小写,tag.style.backgroundColor)
5. 创建标签和操作标签
// 创建标签方式一: var tag = "<a class='c1' href='http//:www.cnblogs.com'>博客园</a>" // 创建标签方式二: var tag = document.createElement('a') tag.innerText = "博客园" tag.className = "c1" tag.href = "http://www.cnblogs.com"
// 操作标签,即将创建的插入整个HTML文档的某个位置 // 方式一 var mytag = document.getElementById('i1') var obj = "<input type='text' />"; mytag.insertAdjacentHTML("beforeEnd",obj); //将标签插入到mytab所代表的标签结束之前的位置,即最后一个子标签 mytag.insertAdjacentElement('afterBegin',document.createElement('p')); //将标签插入到mytab所代表的标签开始之后的位置,即第一个子标签 //注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二 var tag = document.createElement('a') xxx.appendChild(tag) // 将新标签作为xxx的最后一个标签 xxx.insertBefore(tag,xxx[1]) // 将新标签插入xxx的第一个子标签之前