JS学习（离开了jquery我们能做什么）-DOM操作

JS学习（离开了jquery我们能做什么）

jquery是我学习前端最早接触到的框架，与其说我是从js开始进入前端的，倒不如说我是从jquery进入前端的。无论是其选择器系统，简洁易懂的事件绑定，dom操作，还是$.ajax、$.each、$.params、$.extend等等方法的使用，甚至大多数情况下我们都无需考虑兼容性（框架本身已经对此做的很好了），确实把我“养”的越来越“懒”。

我说这些并不是为了介绍jquery做的是有多么多么好，而是在说jquery的温室里，我们渐渐对许多底层、原理没有追求，只是对日常业务中出现的问题，反反复复，像个机械一样，我们知道螺丝要怎样拧，甚至知道要怎样拧的快，但却不知道螺丝为什么要拧到这里，我们为什么要拧螺丝……

本系列博客主要就是自我总结一些经常使用jquery，但却对原理一知半解的这些那些。

jquery的DOM日常

首先来一段简单的jquery dom操作：

//html
<div id="mydiv"></div>

//js
$("#mydiv").html('<input type="text" class="myinput">');
$("#mydiv>input").val("123");

这是一段简单的插入和赋值操作。但是其中包括了选择器，生成jquery对象，dom插入，赋值的过程。

现在我们开始分解：

1.dom选择

js中的dom选择主要采用document对象1下的

getElementxxx()

方法获取到当前对象。

document.getElementById("mydiv")

这里经常使用的获取dom对象的方法主要有：

//jquery
$("#id");
$(".classname");
$("tagname");
$("[name=name]");

$("#id .classname input[name='myinput']");  //多层复杂型

//js
document.getElementById("id");
document.getElementsByClassName("classname");
document.getElementsByTagName("tagname");
document.getElementsByName("name");

document.getElementById("id").getElementsByClassName("classname").getElementsByTagName("tagname").getElementsByName("name");   //多层复杂型

注意：根据id来获取dom对象时是

Element

，而剩下的都是

Elements

，这是因为根据id获取会获取匹配到id的第一个对象，而剩下的都会返回一个对象数组。

当然js提供了很多其他方法可以查找到你想定位的dom对象，例如：

var ele = document.getElementById(id);

ele.parentElement;
ele.parentNode;//只读，没有兼容性问题
ele.offsetParent;//只读，找到最近的有定位的父节点。

// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
ele.children;//标准下、非标准下都只含元素类型，但对待非法嵌套的子节点，处理方式与childNodes一致。
ele.childNodes;//非标准下：只包含元素类型，不会包含非法嵌套的子节点。标准下：包含元素和文本类型，会包含非法嵌套的子节点。

//通过css选择器来找到目标对象
document.querySelector(".classname");  //返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll(".classname1,#id");//document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

（对于

document

今后我会另外写一篇专门的博客来总结）

2.dom操作（渲染方向）

dom操作（渲染）其实主要是对dom对象的属性操作和对dom本身“修改”的操作。当然dom操作还有事件绑定方向。

先来看看jquery API2为我们提供了众多方法（暂只总结常用到的）：

//属性操作
attr(name|prop|key , val|fn); //最直接的属性操作，但如果需要类似radio，checkbox选中，需要使用prop()
removeAttr(name);
prop(n|p|k , v|f);
removeProp(n);
addClass(class|fn);  //对classname的操作其实是对class属性的操作
removeClass(class|fn);
text();
val();
html();  //其实html()个人觉得更偏向文档操作了

//css操作
css(name|pro|[,val|fn]); //jq v1.9+
offset();
position();
scrollTop();
scrollLeft();
width();
height();

//文档操作
append();
appendTo();

(未完待续）

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

关于document对象的所有属性和方法可参考http://www.runoob.com/jsref/dom-obj-document.html ↩
详细api文档请参考https://api.jquery.com/ ↩