class 原生js获取父元素_原生JavaScript与jQuery

本文分别从选择DOM节点、改变CSS样式两方面来总结JavaScript和jQuery的区别。

一、选择DOM节点

1、JavaScript中获取DOM节点：

（1）通过 id 获取-Document的方法 getElementById()返回一个匹配特定 ID的元素.

document.getElementById()

（2）通过 tagname 获取-返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection

document.getElementsByTagName()

（3）通过 class 获取-也可以在任意元素上调用getElementsByClassName()

document.getElementsByClassName()

注：这是HTML5 DOM中新增的一个方法,所以某些DOM可能还无法实现,且该方法和

document.getElementsByTagName()方法都是返回的一个数组.

（4）通过 CSS 选择器获取

（IE8+）document.querySelectorAll() -返回与指定的选择器组匹配的文档中的元素列表
（IE8+）document.querySelector()-返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。

// 通过 id 获取
var div1 = document.getElementById('div1') // 元素

// 通过 tagname 获取
var divList = document.getElementsByTagName('div')  // 集合
console.log(divList.length)
console.log(divList[0])

// 通过 class 获取
var containerList = document.getElementsByClassName('container') // 集合
var parentDOM = document.getElementById("parent-id");
var test = parentDOM.getElementsByClassName("test");

// 通过 CSS 选择器获取
var pList = document.querySelectorAll('p') // 集合
var el = document.querySelector(".myclass") // 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector("div.user-panel.main input[name='login']");
// 一个class属性为"user-panel main"的div元素<div>(<div class="user-panel main">)
// 内包含一个name属性为"login"的input元素<input> (<input name="login"/>) 

附：（5）

elements = document.getElementsByName(name)根据给定的name返回一个在 (X)HTML document的节点列表集合。

name 是元素的 name 属性的值。但是：getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些id为指定值的元素。所以你要小心使用该方法，最好不要为元素的name和id赋予相同的值。

2、jQuery获取DOM节点

使用jQuery在文档树上查找节点非常容易。可以通过jQuery选择器（基本选择器、层次选择器、过滤选择器和表单选择器）快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。

var $li = $("ul li:eq(1)")        // 获取<ul>里第2个<li>节点

3、节点操作比较

3.1 查找节点对比：

例如：假设存在一个 id 为 test 的元素节点

// JS 获取节点方法：

var test = document.getElementById('test')
// 获取父节点
test.parentsNode
// 获取所有子节点
test.childNodes
// 获取第一个子节点
test.firstChild
// 获取最后一个子节点
test.lastChild
// 获取上一个兄弟节点
test.previousSibling
// 获取下一个兄弟节点
test.nextSibling

// JQ 获取节点的方法：

// 获取父节点
$('#test').parent
// 获取所有子节点
$('#test').children
// 获取上一个兄弟节点
$('#test').prev
// 获取之前所有的兄弟节点
$('#test').prevAll
// 获取下一个兄弟节点
$('#test').next
// 获取之后所有兄弟节点
$('#test').nextAll
// 获取所有兄弟节点
$('#test').siblings
// 获取 test 下的某类节点
$('#test').find('span')

3.2 创建节点对比：

JavaScript:Document.createElement() 方法创建由tagName指定的HTML元素。

jQuery: $(html)方法会根据传入的HTML标记字符串，创建一个 DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

// JavaScript语法：let element = document.createElement(tagName[, options]);

// create a new div element 
// and give it some content 
var newDiv = document.createElement("div"); 
var newContent = document.createTextNode("Hi there and greetings!"); 
newDiv.appendChild(newContent); //add the text node to the newly created div. 

// jQuery
var $li_1 = $("<li></li>")         // 创建第1个<li>元素
v