常见的dom操作

最新推荐文章于 2022-04-08 11:58:16 发布

郭豪杨

最新推荐文章于 2022-04-08 11:58:16 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/weixin_42603150/article/details/81218699

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="text" title="20" id="ipt">

<ul>

</ul>

<p>
    p标签
</p>

<span id="span">

</span>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
<script>

    // 查--查找DOM节点

    //查找元素节点p的属性返回属性名称对应的属性值$("#ipt").attr("title"),返回p的属性title的值。

    var ipt=$('#ipt').attr('title');

    console.log(ipt) //20


    //建--新建DOM节点

    //创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：

    // $(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：


    li=$("<li title='创建的li'>创建的li</li>");

    $('ul').append(li)


    //增--添加DOM节点

    //动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个方法，

    // 如下：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

    //1、append()方法
    //append()方法向匹配的元素内部追加内容，　方法如下：
    //该方法查找ul元素，然后向ul中添加新建的li元素。

　　　$("ul").append("<li title='香蕉'>香蕉</li>");


    //2.appendTo()方法
    //appendTo()方法将所有匹配的元素追加到指定的元素中，该方法是append()方法的颠倒[操作主题的颠倒并非操作结果]操作。
    // 该方法新建元素li，然后把li添加到查找到的ul元素中。

// 　　 $("<li title='荔枝'>荔枝<li>").appendTo("ul");


    //3、prepend()方法
    //prepend()方法将每匹配的元素内部前置要添加的元素，
    //该方法将查找元素ul然后将新建的li元素作为ul子节点，且作为ul的第一个子节点插入到ul中

    $("ul").prepend("<li title='芒果'>芒果</li>");


    //5、after()方法
    //after()方法向匹配的元素后面添加元素，新添加的元素做为目标元素后的紧邻的兄弟元素。

    // 方法将查找节点p，然后把新建的元素添加到span节点后面做为p的兄弟节点。

    $("p").after("<span>新加段新加段新加段新加段新加段</span>");

    //6、insertAfter()方法
    //insertAfter()方法将新建的元素插入到查找到的目标元素后，做为目标元素的兄弟节点。

    $("<p>insertAfter操作</p>").insertAfter("p");

    //7、before()方法
    //before()方法在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点。

    //before方法查找每个元素p，将新建的span元素插入到元素p之前做为p的前一个兄弟节点。
　　　　　　　　　　　　
    $("#span").before("<span>下面是个段落</span>");

    //8、insertBefore()方法

    //insertBefore()方法将新建元素添加到目标元素前，做为目标元素的前一个兄弟节点，

    // insertBefore()新建a元素，将新建的a元素添加到元素ul前，做为ul的前一个兄弟节点。

    $("<a href='#'>锚</a>").insertBefore("ul");

//删--删除DOM节点操作

    // 1、remove()方法
    //remove()方法删除所有匹配的元素，传入的参数用于筛选元素，

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

     //2、empty()方法。
　　　//empty()方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点。
     //该示例使用empty方法清空ul中第一个li的文本值。只能下li标签默认符号”·“。
　　　　　　
     $("ul li").empty();
     

    //Dom元素的其他操作:属性操作、样式操作、设置和获取HTML,文本和值、遍历节点操作、Css-Dom操作。

    //1、属性操作attr()和removeAttr()
    //attr()方法能够获取元素属性，也能能够设置元素属性。方法如下，当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值，
    // 当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue;例：

　　　　　　 $("p").attr("title");//该示例用于获得p元素的title属性值。

　　　　　　 $("p").attr("title","你最喜欢的水果");//该示例设置p元素的title属性值为"你最喜欢的水果";

    //如果一次设置多个属性值可以使用“名/值”对形式，例：

　　　　　　 $("p").attr({"title":"你最喜欢的水果","name":"水果"});//。该示例一次设置两个属性值。

　　　　　//removeAttr()方法用于删除特定的属性，方法是在参数中指定属性名。例：

　　　　　　$("p").removeAttr("name");//该方法就是移除p元素的name属性。

郭豪杨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常见的dom操作

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;input
复制链接

扫一扫