dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的，往往有很多方法：dom core，html dom，jquery; dom core/jquery主要通过函数调用的方式（getAttribute("属性名")/attr("属性名")）获取属性值， html dom一般利用属性的形式(element.属性名)获取对应属性值，形式相对简洁。此外，针对于css相关的对象，还有css dom

前端开发中的节点有三种：元素节点；文本节点和属性节点

js一般对于dom core和html dom都支持；html dom仅适用于html这类特殊的xml文档，dom core则对于任何xml文档都适用。

从性能方面考虑

1，尽量使用js原生方法

2，dom core, html dom 优先于 jquery

3，css相关的get和set操作，尽量采用css dom 如 element.style.color="#fffffff";

js原生方法性能高于jquery中的方法，因此，在可能条件下，尽量使用jquery原生方法

this.value /this.getAttribute("value") 取代$(this).val()

this.checked/this.getAttribute("checked")取代$(this).attr("checked",true)/$(this).prop("checked",true)

jquery中的dom操作

1，节点查找

元素节点查找：利用选择器

文本节点查找：使用对应元素的text()函数调用

属性节点查找：jquery使用attr("属性名")，html dom采用.属性名的方法， dom core采用getAttribute("属性名")

2，节点创建

无论哪种节点，只是使用一段html代码

$nodeName=$("html代码")即可

3,节点插入

append();appendTo()(可以用于元素移动);prepend();以上方法，新加入的元素成为原来元素的子元素

insertAfter();insertBefore();以上方法，新加入的元素成为原来元素的同辈元素

4，节点删除

remove():所有绑定的事件，数据等都会删除

detach():绑定的事件，数据被保留

empty()；非删除元素，而是元素内容清空

5，节点复制

clone();复制元素，不复制绑定事件

clone(true):复制元素，同时复制原来元素上绑定的事件

6，节点替换

replaceWith(),replaceAll()二者互为逆操作

7，节点包裹

wrap();wrapAll();wrapInner();

8,属性操作（获取，设置，删除）

dom core中getAttribute，setAttribute，removeAttribute

html core对于特定属性，有.src, .checked, .seleced,.value等简洁写法

jquery中 attr("属性名")，attr("属性名"，属性值)，removeAttr()

9,类操作

element.attr("class");$element.addClass();$element.removeClass();$element.hasClass();

10,状态判断

element.is("selector")，如is(:visible);is(".className")等

11，获取节点html，文本和值

element.html()类似于js中的element.innerHTML

element.text()类似于js中的element.innerTEXT

element.val()类似于js中的element.value

12,样式操作

css dom ：element.style.样式名=样式值

jquery中的样式操作

element.css()

element.css("background":"#fff","width":"400px")

13,位置操作

js中获取元素位置

element.offsetTop,element.offsetLeft;

这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置，而是相对于其最近一个样式属性为absolute或者relative的父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。

jquery中获取元素位置

1）获取相对于其最近一个样式属性为absolute或者relative的父元素位置的相对位置

var position=element.position();

var left=position.left;

var top=position.top;

2)获取相对于当前视窗的位置 

var offset=element.offset(); 

var left=offset.position; 

var top=offset.position;

3)获取相对于滚动条顶部和左端的位置

scrollTop(),scrollLeft();

4)获取事件发生位置

function(e){

var x=e.pageX;

var y=e.pageY;

}