DOM操作二三事

我突然想起了append()，但是我记不太清它是原生JS的还是jQuery封装的，貌似是JS的，咦？那它在jQuery里叫什么来着？哎呀！记不清了！确定append()是JS里的？不是jQuery里的？哎呀！这个问题好low啊，要是被那些大牛知道得笑死我了！赶紧偷偷整理一下！

获取节点内容/修改节点内容

原生JS方法

<div id="test">test</div>

<script>

    alert(document.getElementById("test").innerHTML);

    document.getElementById("test").innerHTML += "test";

</script>

jQuery方法

text()

<div id="test"><h1>test</h1></div>

<script>

    //返回test

    alert($("#test").text());

    $("#test").text(" new test");

</script>

html()

<div id="test"><h1>test</h1></div>

<script>

    //返回<h1>test</h1>

    alert($("#test").html());

    $("#test").html("<h1>new test</h1>");

</script>

属性操作

原生JS方法

<div id="test" style="width:100px; height:100px; background:red;"></div>

<script>

    document.getElementById("test").style.background="yellow";

    alert(document.getElementById("test").style.background);

    document.getElementById("test").setAttribute("width","200px");

    alert(document.getElementById("test").getAttribute("width"));

</script>

注意：在使用setAttribute()后，元素的宽度并未发生改变，究其原因，在debug界面可以看到

<div id="test" style="width: 100px; height: 100px; background: yellow;" width="200px"></div>

width被写在style外面，而真正生效的是style里的width

再看CSS管理器里

element.style {

    width: 100px;

    height: 100px;

    background: yellow;

}

width仍然没有变化...如果不在行间写style写在<style>标签里呢？仍然没有用！因为setAttribute()并不会对element.style发生作用，而element.style的优先级是最高的。

所以在使用setAttribute()时要谨慎，没事就别瞎用了。

jQuery方法

<div id="testDiv" style="width:100px; height:100px; background:red;"></div>

<a href="www.cnblogs.com" id="testLink">cnblogs</a>

<script>

    alert($("#testDiv").attr("background-color"));

    alert($("#testLink").attr("href"));

    $("#testDiv").attr("background-color","yellow");

    $("#testLink").attr("href","www.baidu.com");

    alert($("#testDiv").attr("background-color"));

    alert($("#testLink").attr("href"));

</script>

你会发现a的href是有用的，div的background-color是undefined，换成width还是undefined。我也不知道为什么，总之谨慎使用吧。

<div id="test" style="width:100px; height:100px; background:red;"></div>

<script>

    alert($("#test").css("background-color"));

    $("#test").css({"background-color":"yellow"});

</script>

用css()方法比较稳定，它是CSS类的一个方法，和addClass()/removeClass()/toggleClass()一样。

节点操作

原生JS方法

<div id="testDiv"></div>

<script>

    var testSpan = document.createElement("span");

    var testText = document.createTextNode("Test");

    testSpan.appendChild(testText);

    document.getElementById("testDiv").appendChild(testSpan);

</script>

重复插入是没用的，九浅一深什么的都是没有用的，你只能换着姿势插

<div id="testDiv">

    <p id="testP">Test</p>

</div>

<script>

    var testSpan = document.createElement("span");

    var testText = document.createTextNode("Test");

    testSpan.appendChild(testText);

    var testDiv = document.getElementById("testDiv");

    var testP = document.getElementById("testP");

    testDiv.insertBefore(testSpan,testP);

</script>

或者替换

<div id="testDiv">

    <p id="testP">Test</p>

</div>

<script>

    var testSpan = document.createElement("span");

    var testText = document.createTextNode("TestReplace");

    testSpan.appendChild(testText);

    var testDiv = document.getElementById("testDiv");

    var testP = document.getElementById("testP");

    testDiv.replaceChild(testSpan,testP);

</script>

或者干脆删掉

<div id="testDiv">

    <p id="testP">Test</p>

</div>

<script>

    var testDiv = document.getElementById("testDiv");

    var testP = document.getElementById("testP");

    testDiv.removeChild(testP);

</script>

jQuery方法

<div id="testDiv">

    <p id="testP">Test Paragraph</p>

</div>

<script>

    $("#testDiv").append("Append Test");

    $("#testDiv").append("<p>Element Append Test</p>");

    $("#testDiv").prepend("<p>Prepend Test</p>");

    $("#testP").before("Before Test");

    $("#testP").after("after Test");

</script>

用jQuery则要简单很多，不需要创建节点插来插去，只需要干着插，深深猛插。而且姿势也更多，原生JS只能正常插和从前面插，而jQuery不仅能正常插从前面插，还能在最前面插，在最后面插以及从某个部位的后面插，花样繁多，高下立判。

但是jQuery没有replace方法，但是人家提出了empty()清空子元素

<div id="testDiv">

    <p id="testP">Test Paragraph</p>

</div>

<script>

    $("#testDiv").empty();

</script>

还有remove()，可以自杀

<div id="testDiv">

    <p id="testP">Test Paragraph</p>

</div>

<script>

    $("#testP").remove();

</script>

换着姿势杀

<div id="testDiv">

    <p id="testP">Test Paragraph</p>

</div>

<script>

    $("p").remove("#testP");

</script>

比原生JS不知道高到哪里去了

遍历操作

原生JS方法

<script>

    document.getElementById("test").firstChild;

    document.getElementById("test").lastChild;

    document.getElementById("test").parentNode;

    document.getElementById("test").childNodes[0];

</script>

基本就这样了

jQuery方法

<script>

    //祖先

    //返回向上一级的父元素

    $("test").parent()；

    //返回向上所有的祖先元素直到根节点

    $("test").parents()；

    //返回介于两者之间的所有祖先元素

    $("test").parentsUntil(test2)；

    //子孙

    $("test").children();

    $("test").children("p.testP");

    $("test").find("span");

    $("test").find("*");

    //兄弟

    //前后找，过滤找

    $("test").siblings();

    $("test").siblings("p");

    //往后找

    $("test").next();

    $("test").nextAll();

    //往前找

    $("test").pre();

    $("test").preAll();

    //过滤

    //找第一个

    $("test").first();

    //找最后一个

    $("test").last();

    //按索引找

    $("test").eq(0);

    //按条件找

    $("test").filter(".testFilter");

    //筛选出来找

    $("test").not(".testFilter");

</script>

简直无情，已经把原生JS秒出十条街了。

写在结尾

库再好也只是库，是别人的东西，怎样做出自己的库，做出自己的库的方法才是最重要的。jQuery也只是对原生JS的封装，却能绽放出比原生JS更耀眼的魅力，它的源码才是真正的关键所在。学习思维和方法，永远比学习流于表面的代码重要。这篇笔记仅仅是为了我能够不搞混原生JS和jQuery而记录的，仅此而已。

PS：好吧，原生JS里根本就没有append()方法，我终于搞清楚了。

巴特西

DOM操作二三事

最新文章

热门文章