元素节点

节点树状图

  Document>documentElement>body>tagName

我们常用的节点类型

  元素节点(标签)

  文本节点(文本节点)

  属性节点(标签里的属性)

document有个属性叫nodeType返回的是数字

节点的获取

  元素节点获取有很多方法

  Document.getElementById()

  Document.getElementsByClassName()

  Document.getElementsByTagName()

  Document.querySelector()

属性节点的获取

  元素.attributes获取元素身上所有属性构成的集合

  元素.getAttribute(“属性名”)获取属性值的方法

  元素.setAttribute(“属性名”,“属性值”)给元素设置属性和属性值

  元素.removeAttribute(“属性”)删除属性

  文本节点,没有获取的方法,没有意思

获取元素的子节点

  元素.childNodes这个属性有兼容性,标准浏览器会获取到文本节点,而低版本浏览器不会,所以建议使用children这个属性

获取单个子节点:firstElementChild

获取最后一个子节点:元素.lastElementchild

获取上一个兄弟节点:元素.previousElementSibling

获取下一个兄弟节点:元素.nextElementSibling

获取父节点:元素.parentNode没有兼容性

  

Dom2动态创建节点

  生成节点的方法:document.createElement(“div”)

  插入节点的方法:父元素.appendChild(新节点)

  在指定的位置插入新的节点:父元素.insertBefore(新节点,谁的前面)将新节点插入指定元素前面

  删除元素节点 :  父元素.removeChild()

拓展一个知识点:字符串拼接和Dom创建都是渲染的方式

  字符串拼接:优点:简单,层次感强,可以处理大量数据

        缺点:字符串斌姐会影响到原有子元素的事件

  Dom创建:优点:是一个独立的个体,不会影响到原有的元素

       缺点:处理数据量过大会比较麻烦,会造成Dom回流

Dom回流:

  页面渲染时,我们对html结构简单的增删查改时,浏览器会对所有的dom进行重新排列,这就是Dom回流,严重影响浏览器的性能

补充:

  提升页面性能优化:

    1、多采用雪碧图

    2、阻止超链接的默认行为

    3、减少Dom回流

    4、减少向服务器请求的次数

         

原文地址:https://www.cnblogs.com/wkxdd/p/10044784.html

时间: 2024-09-28 01:28:51

元素节点的相关文章

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点

我们这里所说的获取元素节点的所有子节点包含元素子节点和文本节点两种.还是拿上一篇博文的代码实例进行 分析: <span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

JavaScript的DOM编程--02--获取元素节点

如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度 3) .document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie

JS函数:返回下一个元素节点

1 //寻找先一个元素节点的函数,把一个元素的下一个节点(nextSibing)作为参数传给该函数,经过筛选返回元素节点 2 function nextElementSiblings(node){ 3 if(node.nodeType == 1){ 4 return node; 5 } 6 if(node.nextSibling){ 7 return nextElementSiblings(node.nextSibling); 8 } 9 return null; 10 }

初探JavaScript(一)——也谈元素节点、属性节点、文本节点

Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本<Javascript Dom编程艺术>,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处.就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网

获取元素节点(DOM基础 )

一.DOM 简介:以一种独立于平台和语言的方式访问和修改(添加.移动.改变或移除的方法和属性)一个文档(主要是网页)的内容和结构.是表示和处理一个HTML或XML文档的常用方法. 节点的定义:D(Web网页文档)O(document对象)M(网页文档的树形结构)M中树形结构可以理解为由节点组成.把每个标签看作一个节点.   节点的分类:以一个完成的标签为例<div id ="box">测试Div</div> 元素节点:是标签<div></div

javascript删除一个html元素节点代码实例

javascript删除一个html元素节点代码实例:本章节介绍一下如何利用原生javascript实现删除一个指定的html元素.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

获取子元素节点(children,childNodes)

在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里面来说是"不太正常"的,因为它除了获取到了元素节点的同时也获取到了文本节点,这就是传说中的买一送一?不过,这个送一的活动咱们不想要的时候可以和nodeType结合,就可以进行筛选.代码如下 当然,这个判断是针对高级浏览器.IE6-8是不要进行nodeType的判断的,因为它本来获取的就是只

DOM中元素节点、属性节点、文本节点的理解

转自:http://www.cnblogs.com/dh616854836/archive/2011/08/14/2138038.html 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 在实际应用中,经常用到的就是元素节点.属性节点和文

获取指定的元素节点

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <titl