现在的位置: 网页制作教程网站制作教程 >正文
JavaScript脚本

基本DOM方法-JavaScript学习笔记四

发表于2017/2/22 网站制作教程 0条评论 ⁄ 热度 1,805℃

前面几篇教程主要记录了JS的一些基础内容,相对偏概念一些,从本篇开始的内容将更偏应用些,介绍基本DOM方法。

文档对象模型(DOM)是表示文档(HTML等)和访问、操作构成文档的各种元素的应用程序接口(与浏览器、平台、语言无关),它本质上是一个供程序和脚本动态访问或更新文档的文档平台。

基本DOM方法:

(1)直接引用结点

1、document.getElementByIdx_x_x(id)方法:在文档中通过id来查找结点元素,返回找到的结点对象(仅一个)。

2、document.getElementByTagName(tagName)方法:通过HTML的标签名(如p、div等)在文档中查找,返回满足条件的数组对象。

function start() {
myDocumentElements=document.getElementsByTagName_r("body");
myBody=myDocumentElements.item(0);
myBodyElements=myBody.getElementsByTagName_r("p");
myP=myBodyElements.item(1);
}

document.getElementsByTagName_r("body");中获取了文档中唯一的body元素。

document.getElementsByTagName_r("body");用于获取列表中的第一个元素,事实上列表中仅有一个body元素。

myBody.getElementsByTagName_r("p");获取了body元素中的p元素。

myBodyElements.item(1);从上一行返回的列表中取第二个对象,即body中的第二个p元素。

(2)简介引用结点

1、element.parentNode属性:引用父节点。

2、element.childNodes属性:返回所有子节点的对象数组。

3、element.nextSibling/element.nextPreviousSibling属性:引用下一个/上一个兄弟结点。

(3)获取结点信息

结点信息主要指结点名称、结点类型、结点值。

1、nodeName属性:获取结点名称。

2、nodeType属性:获取结点类型。

3、nodeValue属性:获取结点的值。

4、hasChildNodes():用于判断是否存在子节点。

5、tagName属性:获取标签名。

(4)处理结点信息

允许通过setAttribute()与getAttribute()方法设置/获取结点属性。

1、elementNode.setAttribute(attributeName,attributeValue):设置结点元素的属性。

2、elementNode.getAttribute(attributeName):获取属性值。

(5)处理文本结点

1、innerHTML属性:设置/返回结点开始和结束标签之间的HTML。

2、innerText属性:设置/返回结点开始和结束标签之间的文本。

(6)文档层级结构

1、document_createElement_x_x()方法:创建元素结点。

2、document_createTextNode()方法:创建文本结点。

3、a(childElement)方法:添加子节点。

4、insertBefore(newNode,refNode)方法:在refNode结点前插入newNode结点。

5、replaceChild(newNode,oldNode)方法:使用newNode取代oldNode结点。

6、cloneNode(includeChildren)方法:复制结点,includeChildren为bool,表示是否复制其子节点。

7、removeChild(childNode)方法:删除子节点。

function createMessage() {
var oP = document_createElement_x_x("p");
var oText = document_createTextNode("Hello World!");
oP.a(oText);
document.body.a(oP);
}

上例中先创建了元素p和文本"Hello World!",然后通过a(childElement)方法,将文本附加在元素p上,最后将结点p附着在body元素(结点)上,效果如下图:

JavaScript

  • 暂无评论