1.HTML/XHTML/DHTML的区别和关系?
HTML:<br> <li>abcd <h2 style=color:red>abcd
XHTML: <br/> <li style="">abcd</li>
DHTML: Dynamic HTML,动态超文本标记语言,网页的内容(HTML)和表现(CSS)可以与用户之间发生交互,产生一些动态的可变化的效果。不是一门新技术。使用DHTML把浏览器窗口、网页内容都看做对象。使用DHTML提供的这些对象可以操作浏览器、网页内容。
HTML CSS ES1
内容 + 表现 + 行为 = DHTML
DHTML对象分为两大类:
(1)BOM对象:Browser Object Model,包括七个对象,用于操作浏览器本身,没有相关行业标准,但大部分浏览器厂家都提供了对这七个对象的支持。
(2)DOM对象:Document Object Model,包括N个对象,每个对象对应于一个HTML标签,用于操作网页内容,W3C制定了DOM对象的标准。
2.DOM对象
W3C DOM对象分为三部分:
(1)核心DOM对象:用于操作任意的ML文档
(2)HTML DOM对象:专用于操作HTML文档
(3)XML DOM对象:专用于XML文档
<company>
<dept dname="研发部">
<emp eno="1001">
<ename>Tom</ename>
</emp>
<emp eno="1002">
<ename>Mary</ename>
</emp>
</dept>
</company>
DOM模型把一篇ML文档中的所有内容都看做一个节点对象(Node),节点对象又可以细分为:
(1)文档节点 —— document node
(2)元素节点 —— element node
(3)属性节点 —— attribute node
(4)文本节点 —— text node
(5)注释节点 —— comment node
一篇文档中的所有DOM对象组成一种“树形结构”,树的根是document对象,其它的节点对象都可以通过节点间的关系来查找:
(1)父子关系:
node.parentNode 有0/1个父节点
node.childNodes 有0~n个子节点,组成一个类数组对象
node.firstChild 一个节点的第一个孩子(0/1个)
node.lastChild 一个节点的最后一个孩子(0/1个)
(2)兄弟关系:
node.nextSibling 一个节点的下一个兄弟节点(0/1个)
node.previousSibling 一个节点的上一个兄弟节点(0/1个)
除了上述属性外,每个节点还有三个必备的属性:
node.nodeName node.nodeType node.nodeValue
document #document 9 null
DOCTYPE html 10 null
元素节点 标签名(大写) 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容
注释节点 #comment 8 注释内容
DOM: 是一组对象及成员属性和方法,可用于“增删改查”文档中的内容 |
3.查找元素节点的简便方法——getElementById
用法: document.getElementById( '元素的id' )
注意:与CSS选择器不同,此方法只能返回找到的第一个具有指定id的元素,剩余的不再查找——即方法的返回值要么是null要么是一个特定的元素。
4.查找元素节点的简便方法——getElementsByTagName
用法: document.getElementsByTagName('标签名')
element.getElementsByTagName( '标签名' )
注意:(1)此方法的返回值是一个类数组对象
5.查找元素节点的简便方法——getElementsByName
用法: document.getElementsByName('name属性的值')
说明: 此方法一般用于查找表单中的元素——只有表单中的元素才有name属性。返回值也是类数组对象,因为多个input的name属性值相同:
<input type="radio" name="sex" value="男">
<input type="radio" name="sex" value="女">
6.查找元素节点的简便方法——getElementsByClassName
用法: document.getElementsByClassName('class属性的值')
element.getElementsByClassName('class属性的值')
说明:此方法的返回值是一个类数组对象。老IE不支持此方法!!
7.(重点)查找元素节点的简便方法——使用CSS选择器来查找元素
用法: element.querySelector( 'CSS选择器' ); //返回一个对象
element.querySelectorAll( 'CSS选择器' ); //返回一个类数组对象
补充小知识点: a标签的href属性是必需的! href="" 含义:刷新当前页面 href="#" 含义:跳转到当前页面的起始点 href="#ch1" 含义:跳转到指定的锚点 href="2" 含义:跳转到页面URL为2的页面 href="javascript: void(0)" 含义:不做任何的页面跳转 href="javascript: void(f1())" 含义:调用f1()函数且不做任何页面跳转 |
(1)遍历DOM树
(2)getElementById
(3)getElementByTagName
(4)getElementByName
(5)getElementByClassName
(6)querySelector——老IE不支持
1.选取DOM树上的元素节点的其它方法
(1)document.all 返回文档中所有的节点组成的集合
(2)document.documentElement 返回<html>节点对象
(3)document.head 返回<head>节点对象
(4)document.body 返回<body>节点对象
2.获取/设置元素节点的内容
<h1>一号标题</h1>
(1) h1.firstChild.nodeValue
(2) h1.innerHTML 读取/设置元素中的内容(可以包含子标签)
(3) h1.textContent 读取/设置元素中的文本内容(不包含子标签) —— 符合DOM标准
(4) h1.innerText 读取/设置元素中的文本内容(不包含子标签) —— 老IE的写法
3.读取/设置元素节点的属性
(1)element.attributes 返回一个类数组对象,包含当前元素对象的所有属性节点,如:
div.attributes[2].nodeValue
(2)element.getAttributeNode('属性名') 返回一个属性节点对象,可以使用nodeName、nodeValue访问该对象
(3)element.getAttribute('属性名') 返回一个string,内容即为指定属性的值
(4)element.setAttribute('属性名', '属性值') 修改元素的属性
(5)element.removeAttribute('属性名') 删除指定的属性
(6)element.hasAttribute('属性名') 判定元素是否声明了指定的属性
4.DOM树: 节点树和元素树
节点树: 元素节点、文本节点、属性节点、注释节点...
元素树: 元素节点
一篇文档,既可以看做是一颗节点树,也可以看做时一颗元素树——元素树是节点树的子集,操作起来要比节点树方便。
节点树 |
元素树 |
根对象:document |
根对象:document |
childNodes |
children |
firstChild |
firstElementChild |
lastChild |
lastElementChild |
parentNode |
parentElementNode |
nextSibling |
nextElementSibling |
previousSibling |
previousElementSibling |
提示:元素树相关属性老IE不支持。
<ul>
<li>ABC</li>
<li>XYZ</li>
</ul>
5.在DOM树上添加新的节点
添加新DOM节点对象,需要两步:
(1)创建出新的节点对象
var e = document.createElement('标签名')
var t = document.createTextNode('文本内容')
var c = document.createComment('注释内容')
var a = document.createAttributeNode('属性名')
(2)把新建的节点对象挂到DOM树上
parent.appendChild( newChild ) //把新建的节点追加为父节点的最后一个孩子节点
parent.insertBefore( newChild, existingChild ) //把新建的节点添加到已经存在的子节点之前