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元素()
// 内包含一个name属性为"login"的input元素 ()
附：（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)") // 获取里第2个- 节点
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 = $("") // 创建第1个元素
var $li_2 = $(" 雪梨 ") // 创建一个元素，包括元素节点和文本节点"雪梨"就是创建的文本节点
var $li_1 = $(" 香蕉 ") // 创建一个元素
// 包括元素节点、文本节点和属性节点
// 其中title='香蕉'就是创建的属性节点
3.3 增删节点对比：
JavaScript：
// 增
// 1.Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。
var p = document.createElement("p");
document.body.appendChild(p); // 创建一个新的段落p元素,然后添加到body的最尾部
// 2.Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。
var parentElement = document.getElementById('parentElement'); //插入节点之前，要获得节点的引用
var theFirstChild = parentElement.firstChild; //获得第一个子节点的引用
var newElement = document.createElement("div"); //创建新元素
parentElement.insertBefore(newElement, theFirstChild); //在第一个子节点之前插入新元素
// 删
// 1.Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。
// 先定位父节点,然后删除其子节点
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
// 替换
// parentNode.replaceChild(newChild, oldChild)用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
//
// foo bar
//
// 创建一个空的span元素节点
// 没有id,没有任何属性和内容
var sp1 = document.createElement("span");
// 添加一个id属性,值为'newSpan'
sp1.setAttribute("id", "newSpan");
// 创建一个文本节点
var sp1_content = document.createTextNode("新的span元素的内容.");
// 将文本节点插入到span元素中
sp1.appendChild(sp1_content);
// 获得被替换节点和其父节点的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// 用新的span元素sp1来替换掉sp2
parentDiv.replaceChild(sp1, sp2);
// 结果:
//
// 新的span元素的内容.
//
jQuery:
// 增
// 1 append() 向每个匹配的元素内部追加内容
$("p").append("你好") // 结果是我说：你好
// 2 appendTo() 将所有匹配的元素追加到指定的元素中
$("你好").appendTo("p") // 结果是我说：你好
// 3 prepend() 向每个匹配的元素内部前置内容
$("p").prepend("你好") // 结果是你好我说：
// 4 prependTo() 将所有匹配的元素前置到指定的元素中
$("你好").prependTo("p") // 结果是你好我说：
// 5 after() 在每个匹配的元素之后插入内容
$("p").after("你好") // 结果是我说：
你好
// 6 insertAfter() 将所有匹配的元素插入到指定元素的后面
$("你好").insertAfter("p") // 结果是我说：
你好
// 7 before() 在每个匹配的元素之前插入内容
$("p").before("你好") // 结果是你好我说：
// 8 insertBefore() 将所有匹配的元素插入到指定的元素的前面
$("你好").insertBefore("p") // 结果是你好我说：
// 删
// 1 remove()方法,作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素
$("ul li:eq(1)").remove() // 获取节点中的第2个- 元素节点后，将它从网页中删除
$("ul li").remove("li[title!=菠萝]")// 将
- 元素中属性title不等于“菠萝”的
- 元素删除
// 2 detach()方法
// detach()和remove()一样，也是从DOM中去掉所有匹配的元素。但这个方法不会把匹配的元素从jQuery对象中删除，
// 因而可以在将来再使用这些匹配的元素。与remove()不用的是，所有绑定的事件、附加的数据等都会保留下来。
$("ul li").click(function(){
alert($(this).html()) })
var $li = $("ul li:eq(1)").detach() // 删除元素
$li.appendTo("ul") // 重新追加此元素，发现它之前绑定的事件还在，如果使用remove()方法删除元素的话则它之前绑定的事件将失效
// 3 empty()方法
// empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
$("ul li:eq(1)").empty() // 获取第2个
- 元素节点后，清空此元素里的内容，注意是元素里。
// 当运行代码后，第2个
- 元素的内容被清空了，只剩下
- 标签默认的符号“.”
// 复制
$("ul li").click(function(){
$(this).clone().appendTo("ul") // 复制当前单击的节点，并将它追加到
元素中
})
// 复制节点后，被复制的新元素并不具有任何行为。若需要新元素也具有复制功能（上例是单击事件），可使用如下jQuery代码：
$(this).clone(true).appendTo("body") // 注意参数true，它的含义是复制元素的同时复制元素中所绑定的事件
// 替换
// 1 replaceWith()
// replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者 DOM元素
// 例如：要将网页中你喜欢的蔬果？
替换成你讨厌的蔬果？
$("p").replaceWith("你讨厌的蔬果？")
// 2 replaceAll()
// 该方法与replaceWith()作用相同，只是颠倒了replaceWith()操作，可使用如下代码实现上例同样的功能：
$("你讨厌的蔬果？").replaceAll("p")
// 包裹
// wrap()将某个节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。
$("strong").wrap("") // 用标签把元素包裹起来
二、改变CSS样式
1、Javascript
1.1 使用obj.style对象：
改变HTML元素的样式：document.getElementById(id).style.property = new style
/*第一种，单独给每一个属性设定属性值*/
var tagName = document.getElementById("pTag");
tagName.style.color = 'red';
tagName.style.backgroundColor = 'yellow';
/*第二种，使用cssText设定一组样式,避免页面reflow,提高页面性能*/
var tagName = document.getElementById("pTag");
/*需要注意的一点是，使用cssText，其属性名字与在css中一致，不是驼峰式命名，
例如background-color，而不是backgroundColor*/
tagName.style.cssText = "background-color:yellow;color:red;";
Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。document.getElementById("id").style.property="值"
Hello World!
上面的段落已被脚本改变。
1.2 使用js的setAttribute（）方法更改class属性值
操作 CSS 样式最简单的方法，就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法，直接读写或删除网页元素的style属性。
tagName.setAttribute('class','change-after');
div.setAttribute(
'style',
'background-color:red;' + 'border:1px solid black;'
);
// 相当于HTML 代码
1.3 更改css样式表文件:
var link = document.getElementById('href');
link.setAttribute('href','style/css2.css');
1.4 通过赋值替换原来的class属性值：
tagName.className = 'change-after';
1.5 通过Element.classList来访问元素的类列表。element.classList 本身是只读的，但是你可以使用 add() 和 remove() 方法修改它。
const div = document.createElement('div');
div.className = 'foo';
// 初始状态：
console.log(div.outerHTML);
// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");
//
console.log(div.outerHTML);
2、jQuery
2.1 获取样式和设置样式
获取class和设置class都可以使用attr()方法来完成。
你最喜欢的水果是？
上面的代码中class也是元素的属性，因此获取和设置class都可以使用attr()方法来完成：
var p_class = $("p").attr("class") // 获取元素的class
// 也可以使用attr()方法来设置
元素的class
$("p").attr("class", "high") // 设置
元素的class为high,
// 代码运行后 HTML代码将变为
你最喜欢的水果是？
2.2 追加样式
addClass()方法专门用来追加样式。
2.3 移除样式
removeClass()方法用来删除class的某个值，作用是从匹配的元素中删除全部或者指定的class。
如：$("p").removeClass("high another") // 把
元素的两个class都删除
也可以写成：$("p").removeClass() // 移除
元素的所有class
2.4 切换样式
toggle()方法：用于绑定两个或多个事件处理器函数，控制行为上的重复切换。（该方法也可用于切换被选元素的hide和show）如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。
用法1:$(selector).toggle(function1(),function2(),functionN(),...)
function1(): 必需。规定当元素在每偶数次被点击时要运行的函数。
function2(): 规定当元素在每奇数次被点击时要运行的函数。
functionN(): 规定需要切换的其他函数。
范例：例2.4.1.1
用法2:$(selector).toggle(speed,callback)
检查每个元素是否可见。如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。
speed:可选。规定 hide/show 效果的速度。默认是 "0"。可能的值 ： 毫秒（比如 1500） "slow" "normal" "fast"。
callback:可选。当 toggle() 方法完成时执行的函数。
范例：例2.4.1.2
用法3:$(selector).toggle(switch)
规定是否只显示或只隐藏所有匹配的元素。
switch:必需。布尔值，规定 toggle() 是否应只显示或只隐藏所有被选元素。true - 显示元素 false - 隐藏元素。
范例：例2.4.1.3
toggleClass()方法：在CSS类的应用与不应用之间进行切换。
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
用法1:$(selector).toggleClass(class,switch)
class:必需。规定添加或移除 class 的指定元素。如需规定若干 class，请使用空格来分隔类名。
switch:可选。布尔值。规定是否添加(true)或移除(false) class。
范例：例2.4.2.1
用法2:$(selector).toggleClass(function(index,class),switch)
使用函数来切换类。
function(index,class)：必需。规定返回需要添加或删除的一个或多个类名的函数。 index - 可选。接受选择器的 index 位置。class - 可选。接受选择器的当前的类。
switch：可选。布尔值。规定是否添加(true)或移除(false)类。
范例：例2.4.2.2
2.5 判断是否含有某个样式
hasClass()可以用来判断元素中是否含有某个class，如果有则返回true，否则返回false。
2.6 CSS-DOM操作:CSS-DOM技术简单来说就是读取和设置style对象的各种属性。
2.6.1 jQuery可以直接利用css()方法获取元素的样式属性，也可以直接利用css()方法设置某个元素的单个样式。
2.6.2 关于元素定位: offset()、position()、scrollTop()、scrollLeft()
/** 2.6.1 可以直接利用css()方法获取元素的样式属性，也可以直接利用css()方法设置某个元素的单个样式。*/
$("p").css("color") // 获取元素的样式颜色
$("p").css("color", "red") // 设置
元素的样式颜色为红色
$("p").height() // 获取
元素的高度值
// 等同于
$("p").css("height")
$("p").height(100) // 设置
元素的高度值为100px
$("p").height("10em") // 设置
元素的高度值为10em
/** 2.6.2 关于元素定位
* offset()方法：获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
* position()方法：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，
与offset()一样返回的对象也包括两个属性即top和left。
* scrollTop()方法和scrollLeft()方法：作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。
还可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。
*/
$("textarea").scrollTop(300) // 元素的垂直滚动条滚动到指定的位置
$("textarea").scrollLeft(300) // 元素的横向滚动条滚动到指定的位置
var $p = $("p")
var scrollTop = $p.scrollTop // 获取元素的滚动条距顶端的距离
var scrollLeft = $p.scrollLeft // 获取元素的滚动条距左侧的距离
var position = $("p").position() // 获取
元素的position()
var left = position.left // 获取左偏移
var top = position.top // 获取上偏移
var offset = $("p").offset() // 获取
元素的offset()
var left = offset.left // 获取左偏移
var top = offset.top // 获取上偏移
三、设置和获取HTML、文本和值
1、Javascript
1.1 Element.innerHTML属性设置或获取HTML语法表示的元素的后代。
function log(msg) {
var logElem = document.querySelector(".log");
var time = new Date();
var timeStr = time.toLocaleTimeString();
logElem.innerHTML += timeStr + ": " + msg + "
";
}
log("Logging mouse events inside this container...");
/* 这个例子的 HTML 代码:
Log:
*/
1.2 HTMLElement.innerText属性表示一个节点及其后代的“渲染”文本内容。范例
JS Bin
Source element:
Take a look at
how this text
is interpreted below.
Result of textContent:
Result of innerText:
innerText 很容易与Node.textContent混淆, 但这两个属性间实际上有很重要的区别. 大体来说,innerText 可操作已被渲染的内容， 而 textContent则不会.
1.3 HTMLDataElement.value
value可以用来修改（获取）textarea和input的value属性的值或元素的内容。
2、jQuery
2.1 html()方法
此方法类似于JavaScript中的innerHTML属性，可用来读取或者设置某个元素中的HTML内容。
2.2 text()方法
此方法类似于JavaScript中的innerText属性，可用来读取或者设置某个元素中的文本内容。
2.3 val()方法
此方法类似于JavaScript中的value属性，可用来设置和获取元素的值。无论元素是文本框、下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
本文参考引用：
JavaScript 标准参考教程（alpha）javascript.ruanyifeng.com JavaScript JQuery常用获取 dom 节点www.jianshu.com
锋利的jQuery (豆瓣)book.douban.com
jQuery中toggle()方法、toggleClass()方法blog.csdn.net Javascript改变css样式的四种方法blog.csdn.net 原生js添加类名_JavaScript_前端指南-CSDN博客blog.csdn.net
