JavaScript操作DOM与jQuyer操作DOM的对比

Posted 2020-10-05 鱼樱、、

1.通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

2.通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

3.jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

4.数组的索引是从0开始的，也就是第一个元素下标是0

例子：

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

var $div = $(‘div‘) //jQuery对象

var div = $div.get(0) //通过get方法，转化成DOM对象

5.通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

 jQuery选择器：元素选择器   id选择器    类选择器    *选择器  层级选择器  属性选择器（子元素 后代元素 兄弟元素 相邻元素）

注意：

1. IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
2. getElementById的参数在IE8及较低的版本不区分大小写
3. IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
4. IE8及较低的版本，浏览器不支持getElementsByClassName

原生获取：

//获取页面中所有的元素
var elements1 = document.getElementsByTagName(‘*‘);

jq获取：

//获取页面中所有的元素
var elements2 = $("*")? ;
//===表示数据和类型都相等
if(elements2.length === elements1.length){
　　elements2.css("border","1px solid red");
}

子选择器
$(‘div > p‘) 选择所有div元素里面的子元素P

后代选择器
$(‘div p‘) 选择所有div元素里面的p元素

相邻兄弟选择器
$(".prev + div")选取prev后面的第一个的div兄弟节点

一般相邻选择器
$(".prev ~ div")选取prev后面的所有的div兄弟节点

几种方式可以隐藏一个元素：

1. CSS display的值是none。
2. type="hidden"的表单元素。
3. 宽度和高度都显式设置为0。
4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
5. CSS visibility的值是hidden
6. CSS opacity的指是0

1. :nth-child(index)从1开始的，而eq(index)是从0开始的
2. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法

attr()有4个表达式

1. attr(传入属性名)：获取属性的值
2. attr(属性名, 属性值)：设置属性的值
3. attr(属性名,函数值)：设置属性的函数值
4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

优点：

attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题

注意的问题：

dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性

获取Attribute就需要用attr，获取Property就需要用prop