function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_temp = _div.childNodes for (var i = 0, len = dom_temp.length; i < len; i++) { if (dom_temp[i].nodeType === 1) { return dom_temp[i]; } } return } 原生js快速渲染…

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图…

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous…

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法. DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 把上面的代码拆分为Dom节点图  如图: 三种常见的DOM节点: 1.元素节点: 比如:html.h2.p.ul.li   即标签 2.文本节点:向用户展示的内容,比如:<li></li>中的JavaScript.DOM.CSS等文本 3.属性节点:元素属性  比如:<a></a>标签中…

文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 ==一般情况下,每个元素只有一个文本节点== ==但是在某些情况下也会有多个节点,例子如下== //创建父节点 var element=document.createElement("div"); element.className="message"; //添加第一个文本…

1. 通过顶层document节点获取:    (1)document.getElementById(elementId) :通过ID获得节点,如果页面上含有多个相同id的节点,那么只返回第一个节点.   (2)document.getElementsByName(elementName) :通过name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组.然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点.            例如:在HTML中…

通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别       在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级标准是不存在的:所谓DOM0级只是DOM历史坐标中的一个参照点而已.具体说来,DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML.那下面就介绍一下这存在的三个级别. DOM1级(DOM Level 1)于1998年10月成为W…

针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的代码. 另外这篇不包括DOM2,DOM3的内容 DOM 文档对象模型,针对HTML和XML文档的一个API.描绘了一个层次化的结点树,循序开发人员添加,移除修改页面上的一部分. 1节点层次 DOM把文档描绘成一个由多层节点构成的结构.节点有不同的类型.节点之间的关系构成了层次. 文档节点是每个文档的…

1.1 Node类型 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JS中是作为Node类型实现的:除了IE之外,其他浏览器可访问这个类型.JS中的所有节点类型都继承自Node类型.注意:不是所有节点类型都受到了Web浏览器的支持. 每个节点都有一个childNodes属性,其中保存着一个NodeList对象.NodeList是一种类数组对象,并不是Array的实例.它实际是基于DOM结构动态执行查询的结果.除了在IE8-中,可以使用Array.pro…

许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document.getElementById() //兼容问提:IE低版本不仅检查Id属性,还会检查Name属性,当Name属性匹配参数时也会返回该元素 //解决方法:不要让一个元素name属性和另一个元素的id属性相同 document.getElementsByTagName() document.getEle…