189 8069 5689

探索JavaScript之DOM的世界-创新互联

1990年代后期微软与Netscape的“浏览器大战” ,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。现在我们就来一起了解一下关于JavaScript-DOM的世界。

做网站、成都网站建设的开发,更需要了解用户,从用户角度来建设网站,获得较好的用户体验。成都创新互联公司多年互联网经验,见的多,沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司,打造的就是网站建设产品直销的概念。选择成都创新互联公司,不只是建站,我们把建站作为产品,不断的更新、完善,让每位来访用户感受到浩方产品的价值服务。

DOM的增加

DOM操作中指的是增加节点,分为两部分:创建节点插入节点

创建节点

创建节点中常用的API方法主要有:

1. document.createElement():创建指定的HTML元素

2. document.createTextNode():创建文本节点

3. document.createDocumentFrame():创建文档片段

4. document.createAttribute():创建节点属性

5. node.cloneNode():克隆节点

插入节点###

插入节点常用的API方法主要有:

1. node.appendChild():末尾追加一个新节点

2. node.insertBefore():插入一个新节点

这是一个段落

这是另一个段落

例子解释:

这段代码创建新的

元素:

var para=document.createElement("p");

如需向

元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("这是新段落。");

然后您必须向

元素追加这个文本节点:

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素:

element.appendChild(para);

关于document.createAttribute()

document.createAttribute() 方法创建并返回一个新的属性节点。但是这个方法不是很常用,如果涉及到创建属性,一般使用node.setAttribute() 。

这是一个段落

这是另一个段落

var node = document.getElementById('div1');var newAttr = document.createAttribute('title');  //创建一个新的title属性;

newAttr .nodeValue ='Hello world!';  //title属性的值是:Hello world!

node.setAttributeNode(attr);//运用到对应的元素节点上

关于node.cloneNode()

node.cloneNode(deep) 方法返回该节点的一个副本,deep 可选,表明是否采用深度克隆,如果为true ,则该节点的所有后代节点也都会被克隆,否则,只克隆该节点本身。

这是一个段落

这是另一个段落

var node = document.getElementById('div1');var cloneNode = node.cloneNode(true);//克隆div1整个节点;

cloneNode.id ="div2";//修改克隆的节点id名称为div2;

document.body.appendChild(cloneNode);//在网页中追加克隆的节点;

DOM的删除

DOM节点的删除主要API是node.removeChild();可以使用parentNode.removeChild(child)删除指定父节点parentNode的一个子节点child,并返回被删除的节点。

注意事项:这个方法是要在被删除的节点的父节点上调用的,而不是在被删除节点上调用的,如果参数节点不是当前节点的子节点,removeChild 方法将报错。

这是一个段落。

这是另一个段落。

例子解释:

这个 HTML 文档含有拥有两个子节点(两个

元素)的

 元素:

这是一个段落。

这是另一个段落。

找到id="div1"的元素:

var parent=document.getElementById("div1");

找到id="p1" 的 

元素:

var child=document.getElementById("p1");

从父元素中删除子元素:

parent.removeChild(child);

DOM的修改

修改节点常用的API方法主要有:

1. appendChild():末尾追加一个新节点

2. insertBefore():插入一个新节点

3. replaceChild():替换节点

注意事项:以上几个方法都是操作的某个节点的子节点,也就是说,要使用这几个方法必须先取得父节点。另外并不是所有节点都有子节点,如果在不支持子节点的节点上,调用了这些方法,将会导致错误。

DOM的查找

DOM节点中的查主要包括:查找元素节点查找

查找元素

1. getElementById() --- 通过ID访问;

2. getElementsByClassName() --- 通过类名访问;

3. getElementsByTagName() --- 通过标签名称访问;

4. querySelector() --- 通过CSS选择器访问(单个);

5. querySelectorAll() --- 通过CSS选择器访问 (所有);

关于这一节的内容,可以访问上一篇文章:JavaScript-DOM访问方式

节点查找

所有的节点都有这些属性,都是可以用于访问相关的node节点:

1. Node.childNodes: 访问一个单元素下所有的直接子节点元素,可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点(比如text节点或其他元素节点)。

2. Node.firstChild: 与childNodes数组的第一个项(Element.childNodes[0])是同样的效果,仅仅是快捷方式。

3. Node.lastChild: 与childNodes数组的最后一个项(Element.childNodes[Element.childNodes.length-1])是同样的效果,仅仅是快捷方式。

4. Node.parentNode: 访问当前节点的父节点,父节点只能有一个,祖节点可以用Node.parentNode.parentNode 的形式来访问。

5. Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。

6. Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。

总结

这些就是本期进行的dom的增、删、改、查操作,当然可能并不够全面,还有很多细节需要大家继续研究,如果大家对此感兴趣的话,不妨关注我们,接下来还有更多的内容会和大家分享。

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻标题:探索JavaScript之DOM的世界-创新互联
文章起源:http://jkwzsj.com/article/ieiii.html