1. Document类型:用来表示文档。在javascript中,① document对象用来表示整个HTML页面。document对象为HTMLDocument(继承自Document类型)的一个实例。② document对象是window对象的一个属性,可以将其作为全局对象来访问。
Document类型可以表示HTML页面或者其他基于XML的页面。最常用的还是document对象
Document节点的特征:
nodeType 的值为 9;
nodeName 的值为"#document";
nodeValue 的值为 null;
parentNode 的值为 null;
ownerDocument 的值为 null;
其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或 Comment
document对象的属性:
① documentElement属性:指向HTML页面的<html>元素。
② childNodes属性:返回子节点列表。
③ document.documentElement == document.childNodes[0] == document.firstChild --------->html
④ body属性:指向<body>元素
⑤ document.doctype-----获得<!DOCTYPE>的引用。
⑥ document.title-----获得<title>标签的文本,也可以用它来修改<title>标签的文本并体现在浏览器的标题栏中。
⑦ document.URL-----获得当前页面完整的URL、document.domain----获得当前页面的域名(可以自行设置)、document.referrer----获得链接到当前页面的页面的URL。(这三个信息都存在HTTP头部)
document对象的方法:
① getElementById():根据id返回对应的元素。(参数区分大小写)如果页面有多个id相同的元素,则返回页面中的第一个元素。
② getElementsByTagName(): 根据标签名返回对应的元素。返回一个HTMLCollection对象。访问HTMLCollection对象有四种方式:通过索引、通过item()函数、通过namedItem()方法----针对有name属性的元素、方括号语法---传入数值,后台调用的是item方法,传入字符串后台调用的是namedItem方法。
③ getElementsByName():返回带给给定name的所有元素。最常用的是获取单选按钮。
document对象的特殊集合:这些集合都是HTMLCollection对象
① document.anchors:包含文档中所有带name特性的<a>元素。
② document.form:包含文档中所有的<form>元素。
③ document.images:包含文档中所有的<img>元素。
④ document.links:包含文档中所有的带有href属性的<a>元素。
document对象将输出流写入网页中的能力:wirte()、writeln()、open()、close()
① write()和writeln():接收一个字符串参数,即要写到网页中的文本。前者原样写入、后者会在字符串末尾添加一个换行符。
网页中的结果为:
2. Element类型(元素节点):用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。
Element节点的特征:
nodeType的值为1
nodeName的值为元素的标签名(与tagName属性的功能相同)
nodeValue的值为null
parentNode的值为Document或Element 子节点可能为:Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference
注意:在HTML中,标签名始终以全部大写表示。而在XML中标签名与源代码保持一致。
HTML元素都由HTMLElement类型(继承自Element)或者他的子类型来表示。
HTML元素的属性:跟已通过属性获取或修改属性值
① id属性:元素在文档中的唯一标识符。
② title属性:元素的附加说明信息,通过工具提示条显示出来。
③ className属性:与元素的class特性对应。
HTML元素取得特性(特性的用途是给出相应的元素或内容的附加信息)的方法:
①getAttribute()方法:取得(非)自定义特性,特性的名称不区分大小写。非自定义的特性会以属性的形式添加到DOM对象中,所以元素的非自定义特性也可以通过属性来访问。
② setAttribute()方法:设置特性的值(设置的特性名会统一转换为小写形式)。参数为要设置的特性的名字,和特性的值。如果特性已经存在,该函数会以指定的值替换现有的值;如果特性不存在,该函数会创建该特性并设置相应的值。
③ removeAttribute() 方法:彻底删除元素的特性。
Element类型的attributes属性: 返回一个NamedNodeMap对象,heNodeList类似,是一个动态的集合。该对象保存的是Attr节点,该节点表示元素的特性。
NamedNodeMap对象的方法:
① getNamedItem(name):返回nodeName属性为name的节点。
② removeNamedItem(name):从列表中删除nodeName属性为name的节点。
③ setNamedItem(node):向列表添加节点,一节点的nodeName属性为节点。
④ item(pos):返回数字pos位置处的节点。
创建元素:document.createElement(),参数为标签名或者传入完整的元素标签
document.createElement("div");
document.createElement("<div id=\"myNewDiv\" class=\"box\"></div>");
可以使用appendChild()、insertBefore()、replaceChild()将新元素加入到文档中。如:document.body.appendChild(node)
3. Text类型(文本节点):表示文本节点,包含的是纯文本内容,纯文本内容可以包含转义后的HTML字符,但不能包含HTML代码。
Text节点的特征:
nodeType值为3
nodeName值为#text
nodeValue值为节点所包含的文本(与data的属性相同)
parentNode为Element节点,没有子节点
Text节点的方法:
① appendData(text):将text添加到节点的末尾
② deleteData(offset,count):从offset指定位置开始删除count个字符
③ insertData(offset,text):从offset指定位置插入text
④ replaceData(offset,count,text):用text替换从offset指定位置开始到offset+count为止处的文本
⑤ splitText(offset):从offset指定位置将当前文本分成两个文本。原来的文本节点将包含从开始节点到指定位置之前的内容,新文本节点将包含剩下的文本。该方法返回一个新文本节点,该文本节点与原节点的parentNode相同。
⑥ subStringData(offset,count):提取从offset指定位置开始到offset+count为止处的字符串
⑦ normalize():将相邻文本合并
Text节点的属性:length,保存的是节点中字符的数目
创建文本节点:
document.createTextNode("Hello World")或者document.createTextNode("<strong>Hello</strong> world!")
页面显示为:
splitText()方法:
网页显示:
4.Comment类型:注释节点,其余<html></html>之间的内容
Comment节点的特征:
① nodeType的值为8
② nodeName的值为#comment
③ nodeValue的值为注释的内容(与data属性类似)
④ parentNode的值为Document或者Element
⑤ 没有子节点
Comment节点的方法:
① appendData(text):将text添加到节点的末尾
② deleteData(offset,count):从offset指定位置开始删除count个字符
③ insertData(offset,text):从offset指定位置插入text
④ replaceData(offset,count,text):用text替换从offset指定位置开始到offset+count为止处的文本
⑤ subStringData(offset,count):提取从offset指定位置开始到offset+count为止处的字符串
⑥ normalize():将相邻文本合并
⑦ document.createComment()方法可以创建注释节点