JS 小总结

DOM 与 JQuery 之间的转换

1. JQuery对象转DOM对象

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

2.DOM对象转jQuery对象

联想记忆：我有钱[美元]，所以我的功能就更强大。

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

字符串转dom和JQuery

1. 字符串转dom

function parseDom(str) {
    var elem = document.createElement("div");
    elem.innerHTML = str;
    return elem.childNodes;
};

var elem = parseDom('<h1 class="postTitle"><a href="#">string转Dom</a></h1>');
console.log(elem[0]);

2. 字符串转JQuery

var elem = $('<h1 class="postTitle"><a href="#">string转Dom</a></h1>');
console.log(elem[0]);

一、获取节点

dom

（1）通过 id 获取

var value = document.getElementById("id");
console.log(value);

（2）通过 class 获取

var values = document.getElementsByClassName("class");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（3）通过 name 获取

var values = document.getElementsByName("name");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（4）通过 标签名 获取

var values = document.getElementsByTagName("TagName");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（5）通过 JQuery 选择器获取

var value = document.querySelector("#id");
console.log(value);

var values = document.querySelectorAll("其它选择器");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

JQuery

（1）通过 id 获取

var values = $("#id");
console.log(values);

（2）通过 class 获取

var values = $(".class");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（3）通过 name 获取

var values = $("[name='name']");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（4）通过 标签名 获取

var values = $("TagName");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

二、获取子节点

dom

（1）通过获取dom方式直接获取子节点

var values = document.getElementById("id").getElementsByClassName("class");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（2）获取子节点

① 通过childNodes获取子节点，会把换行和空格也当成是节点信息

var values = document.getElementById("id").childNodes;
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

为了不显示不必须的换行的空格，我们如果要使用 childNodes 就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。

var values = document.getElementById("id").childNodes;
console.log(values);
console.log(document.getElementById("id").childElementCount);
console.log(values.length);
for (let i = 0; i < values.length; i++) {
    if (values[i].nodeName == "#text" && !/s/.test(values.nodeValue)) {
        document.getElementById("id").removeChild(values[i]);
    }
}
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}
console.log(document.getElementById("id").childElementCount);

② 通过children来获取子节点，利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

var values = document.getElementById("id").children;
console.log(values);
console.log(document.getElementById("id").childElementCount);
console.log(values.length);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（3）获取第一个子节点

① 通过 firstChild 获取第一个子节点

有些情况下我们打印的时候会显示undefined，firstChild和childNodes是一样的，在浏览器解析的时候会把他当换行和空格一起解析。

var value = document.getElementById("id").firstChild;
console.log(value);

② 通过 firstElementChild 获取第一个子节点

使用firstElementChild来获取第一个子元素的时候，这就没有firstChild的那种情况了。会获取到父元素第一个子元素的节点，这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

var value = document.getElementById("id").firstElementChild;
console.log(value);

（4）获取最后一个子节点

lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的。同样的lastElementChild 和 firstElementChild也是一样的。不再赘余。

var value = document.getElementById("id").lastChild;
console.log(value);

var value = document.getElementById("id").lastElementChild;
console.log(value);

JQuery

（1）获取子节点

var values = $("#id").children();
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（2）获取筛选后的子节点

var values = $("#id").children(".class");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（3）元素筛选

$("ul li").eq(1); 
// 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
$("ul li").first(); 
// 选取ul li中匹配的第一个元素
$("ul li").last(); 
// 选取ul li中匹配的最后一个元素
$("ul li").slice(1, 4); 
// 选取第2 ~ 4个元素
$("ul li").filter(":even"); 
// 选取ul li中所有奇数顺序的元素

（4）从所有子孙节点中筛选

var values = $("#id").find(".class");
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

三、获取父节点

dom

（1）parentNode 获取父节点

获取的是当前元素的直接父元素。parentNode是w3c的标准。

var value = document.getElementById("id").parentNode;
console.log(value);

（2）parentElement 获取父节点

parentElement和parentNode一样，只是parentElement是ie的标准。

var value = document.getElementById("id").parentElement;
console.log(value);

（3）offsetParent 获取所有父节点

直接能够获取到所有父亲节点， 这个对应的值是body下的所有节点信息。

var values = document.getElementById("id").offsetParent;
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

JQuery

（1）获取直接父节点

var value = $("#id").parent();
console.log(value[0]);

（2）获取所有父节点

var values = $("#id").parents();
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（3）获取所有筛选后的父节点

var value = $("#id").parents(".class");
console.log(value[0]);

四、获取兄弟节点

dom

（1）通过获取父亲节点再获取子节点来获取兄弟节点

var value = document.getElementById("id").parentNode.children[1];
console.log(value);

（2）获取上一个兄弟节点

在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。

previousSibling 会匹配字符，包括换行和空格，而不是节点。previousElementSibling 则直接匹配节点。

var value = document.getElementById("id").previousSibling;
console.log(value);

var value = document.getElementById("id").previousElementSibling;
console.log(value);

（3）获取下一个兄弟节点

同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。

var value = document.getElementById("id").nextSibling;
console.log(value);

var value = document.getElementById("id").nextElementSibling;
console.log(value);

JQuery

（1）获取前兄弟节点

prev() 上一个兄弟节点

prevAll() 之前所有兄弟节点

var value = $("#id").prev();
console.log(value[0]);

var values = $("#id").prevAll();
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（2）获取后兄弟节点

next() 下一个兄弟节点

nextAll() 之后所有兄弟节点

var value = $("#id").next();
console.log(value[0]);

var values = $("#id").nextAll();
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

（3）获取所有兄弟节点

var values = $("#id").siblings();
console.log(values);
for (let i = 0; i < values.length; i++) {
    const element = values[i];
    console.log(element);
}

var value = $("#id").siblings(".class");
console.log(value[0]);

五、创建节点

dom

var elem = document.createElement("div");
console.log(elem);

JQuery

var elem = $('<div></div>');
console.log(elem[0]);

六、删除节点

dom

var remove = document.getElementById("id");
var value = remove.parentNode.removeChild(remove);
console.log(value);

JQuery

（1）empty方法

清空方法，与删除有点不一样，因为它只移除指定元素中的所有子节点。

这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。

var remove = $("#id").empty();
console.log(remove[0]);

（2）remove方法

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

有参，传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点。

var remove = $("#id").remove();
console.log(remove[0]);

var remove = $("#id").remove(".class");

（3）detach方法

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

var remove = $("#id").detach();
var remove = $("#id").detach(".class");

七、插入节点

dom

（1）appendChild 方法

内部追加插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。

var node = document.createElement("li");
node.innerHTML = "Hello";
console.log(node);
document.getElementById("id").appendChild(node);

（2）insertBefore 方法

insertBefore(a,b) 是参照节点，意思是a节点会插入b节点的前面。

var node = document.createElement("li");
node.innerHTML = "Hello";
console.log(node);
document.getElementById("id").parentNode.insertBefore(node, document.getElementById("id"));

JQuery

（1）append、appendTo 方法（追加）

内部插入append()与appendTo()

append() 前面是被插入的对象，后面是要在对象内插入的元素内容。

appendTo() 前面是要插入的元素内容，而后面是被插入的对象。

var node = $("<li>Hello</li>");
console.log(node[0]);
$('#id').append(node);

var node = $("<li>Hello</li>");
console.log(node[0]);
node.appendTo($('#id'));

（2）prepend、prependTo 方法（前置）

内部插入prepend()与prependTo()

prepend() 向每个匹配的元素内部前置内容（作为第一个子元素）

prependTo() 把所有匹配的元素前置到另一个指定的元素集合中。

var node = $("<li>Hello</li>");
console.log(node[0]);
$('#id').prepend(node);

var node = $("<li>Hello</li>");
console.log(node[0]);
node.prependTo($('#id'));

（3）after、before 方法

外部插入after()与before()

after() 在匹配元素后面插入参数所指定的内容，作为其兄弟节点。

before() 在匹配元素前面插入参数所指定的内容，作为其兄弟节点。

var node = $("<li>Hello</li>");
console.log(node[0]);
$('#id').after(node);

var node = $("<li>Hello</li>");
console.log(node[0]);
$('#id').before(node);

（4）insertAfter、insertBefore 方法

外部插入insertAfter()与insertBefore()

before()和insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。

对于before()选择表达式在函数前面，内容作为参数，而insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面。

after()与insertAfter()同理

var node = $("<li>Hello</li>");
console.log(node[0]);
node.insertAfter($('#id'));

var node = $("<li>Hello</li>");
console.log(node[0]);
node.insertBefore($('#id'));

八、替换节点

dom

replaceChild 方法

replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

var node = document.createElement("li");
node.innerHTML = "Hello";

var replace = document.getElementById('id');

var value = replace.parentNode.replaceChild(node, replace);
console.log(value);

JQuery

（1）replaceWith 方法

replaceWith(newContent) ，用提供的内容替换集合中所有的匹配的元素并且返回被替换元素的集合。

var node = $("<li>Hello</li>");
var value = $('#id').replaceWith(node);
console.log(value[0]);

（2）replaceAll 方法

replaceAll(target)，用集合的匹配元素替换每个目标元素并且返回被替换元素的集合。内容和选择器的位置与replaceWith () 相反。

var node = $("<li>Hello</li>");
var value = node.replaceAll('#nihao');
console.log(value[0]);

注意

replaceWith()与replaceAll()会删除与节点相关联的所有数据和事件处理程序。

九、包裹、克隆节点

JQuery

（1）包裹 wrap 方法

给元素添加父元素。

var node = $('<div class="wraps"></div>');
var value = $('#id').wrap(node);
console.log(value[0]);

（2）包裹 unwrap 方法

删除选中元素的父元素、保留自身（和兄弟元素）在原来的位置。

var value = $('#id').unwrap();
console.log(value[0]);

（3）包裹 wrapAll 方法

　　wrap是针对单个dom元素处理。如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素。

　　wrapAll(wrappingElement) ：给集合中匹配的元素增加一个外面包裹HTML结构。

var node = $('<div class="wraps"></div>');
var value = $('.class').wrapAll(node);
console.log(value[0]);

（4）包裹 wrapInner 方法

　　将合集中的元素内部所有的子元素用其他的元素包裹起来，并当作指定元素的子元素。

var node = $('<div class="wraps"></div>');
var value = $('.class').wrapInner(node);
console.log(value[0]);

（5）克隆 clone 方法

　　clone()深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

　　注意：如果节点有事件或者数据之类的，需要通过clone(true)传递一个布尔值true用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。

var value = $('#id').clone();
$('#id').before(value);
console.log(value[0]);

十、设置、获取节点内容

dom

（1）innerText

innerText 可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容（不包含html标签）。

获取时会跳过html标签，只获取文本。

设置时会显示文本形式的html标签和文本值。

var node = document.getElementById("id");
// 获取
console.log(node.innerText);
// 设置
node.innerHTML = "Hello";

（2）innerHTML

innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容（包含html标签）。

获取时不会跳过html标签，获取文本形式的html标签。

设置时会显示 html标签和文本值。

var node = document.getElementById("id");
// 获取
console.log(node.innerHTML);
// 设置
node.innerHTML = "<b>这是段落。</b>后面省略";

（3）value

获取或设置 value 属性

var node = document.getElementById("id");
// 获取
console.log(node.value);
// 设置
node.value = "Hello";

JQuery

（1）text 方法

和 innerText 相似，是 Jquery对象的方法。

var node = $('#id');
// 获取
console.log(node.text());
// 设置
node.text("<b>Hello</b>");

（2）html 方法

和 innerHTML 相似，是 Jquery对象的方法。

var node = $('#id');
// 获取
console.log(node.html());
// 设置
node.html("<b>Hello</b>");

（3）val 方法

和 value 相似，是 Jquery对象的方法。

var node = $('#id');
// 获取
console.log(node.val());
// 设置
node.val("Hello");

十一、设置、获取节点属性

dom

（1）元素中自带的属性的设置和获取

var node = document.getElementById('id');
// 获取
console.log(node.id);
console.log(node.className);
// 设置
node.id = "newId";
node.className = "newClass";
console.log(node);

（2）元素的所有属性的设置和获取

var node = document.getElementById('id');
// 设置
node.setAttribute("id","newId");
node.setAttribute("class","newClass");
node.setAttribute("name","newName");
// 获取
console.log(node.getAttribute("id"));
console.log(node.getAttribute("class"));
console.log(node.getAttribute("name"));

console.log(node);

（3）删除属性

var node = document.getElementById('id');
node.removeAttribute("name");
console.log(node);

JQuery

（1）获取、设置属性

var node = $('#id');

// 设置
node.attr("id","newId");
node.attr("class","newClass");
node.addClass("class");
node.attr("name","newName");

// 获取
console.log(node.attr("id"));
console.log(node.attr("class"));
console.log(node.attr("name"));

console.log(node[0]);

（2）删除属性

var node = $('#id');
node.removeAttr("name");
node.removeClass("class");

十二、改变节点 CSS

dom

（1）修改style样式

var node = document.getElementById('id');
node.style.color = 'red';
console.log(node);

（2）修改元素节点的style内容

var node = document.getElementById('id');
node.style.cssText = 'color: red;background-color: yellow;';
console.log(node);

（3）通过setAttribute 修改style属性值

var node = document.getElementById('id');
node.setAttribute('style', 'color: red;background-color: yellow;');
console.log(node);

JQuery

（1）获取css属性

var node = $('#id');
console.log(node.css('color'));

（2）设置css属性

var node = $('#id');
node.css('color', 'red');
console.log(node[0]);

// 多个css属性
var node = $('#id');
node.css({ 'color': 'red', 'background-color': 'yellow' });
console.log(node[0]);

（3）通过setAttribute 修改style属性值

var node = $('#id');
node.attr('style','color: red;background-color: yellow;');
console.log(node[0]);