DOM操作和节点操作

作者: 常威爆打来福 | 来源:发表于2017-07-17 16:49 被阅读0次

DOM (javascript DOM节点操作)
DOM操作和节点操作
Dom操作
05-DOM相关知识点讲解
canvas 上添加事件绑定
JQuery---dom相关节点操作
第十七章 DOM基础
Vue解决了哪些问题
DOM
DOM

一样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .divItem{
            background: #000;
            color: #ffffff;
        }
        .divItem1{
            background: red;
            color: black;
        }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            /**
             * 给所有的li元素添加样式
             * 给选定的元素添加类样式，注意：样式名字没有    点.
             * */
            $("li").addClass("divItem");
            /**
            * 给指定的元素删除某种样式
             * 有参数移除指定样式，没有参数移除所有样式
            * */
            $("li").eq(2).removeClass("divItem");
            /**
             *切换
             * */
            $("button:first").click(function () {
               $("li").eq(1).toggleClass("divItem1");
            });
            /**
             * 判断有没有样式
             * */
            $("button:last").click(function () {
               var st=$("li").eq(0).hasClass("divItem");
               //获取返回值类型，并输出
                // alert(st);
               if (st == true){
                   $("li").eq(0).removeClass("divItem");
               }else {
                   $("li").eq(0).addClass("divItem1")
               }
            });

        });
    </script>
</head>
<body>
<button>切换</button>
<button>判断</button>
<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
    <li>555555</li>
    <li>666666</li>
    <li>777777</li>
    <li>888888</li>


</ul>
</body>
</html>

总结
添加样式

$("li").addClass("divItem");

移除样式

$("li").eq(2).removeClass("divItem");

判断有无样式

$("li").eq(0).hasClass("divItem"); 返回值为布尔类型

二 tab切换栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
            border: 0px;
            list-style: none;
        }
        .wrapper{
            width: 1000px;
            height: 475px;
            margin: 100px auto ;
        }
        .tab{
            border: 1px solid #dddddd;
            height: 36px;
            width: 320px;
            border-bottom: 0px;
        }
        .wrapper li{
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top:4px solid #ffffff;
            position: relative;
        }
        .products{
            width: 1002px;
            border:1px solid #ddd;
            height: 476px;
        }
        .products .main{
            float: left;
            display: none;
        }
        .products .main.selected{
            display: block;
        }
        .tab li.active{
            border-color: red;
            border-bottom: 0;
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
           $(".tab li").mouseenter(function () {
               //给当前元素添加active这个样式
               //给当前这个元素的所有兄弟元素移除active这个样式  siblings
               $(this).addClass("active").siblings().removeClass("active");
               //让下面的div内容，根据上面tab栏菜单展示相应的内容
               //index（）获取当前元素序号
               var index=$(this).index();
               $(".products div").eq(index).addClass("selected").siblings().removeClass("selected");
           }) ;
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li>国际大牌</li>
        <li>国妆名牌</li>
        <li>清洁用品</li>
        <li>男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
        <a href="#">![](imgs/guojidapai.jpg)</a>
        </div>
        <div class="main">
        <a href="#">![](imgs/guozhuangmingpin.jpg)</a>
        </div>
        <div class="main">
        <a href="#">![](imgs/qingjieyongpin.jpg)</a>
        </div>
        <div class="main">
        <a href="#">![](imgs/nanshijingpin.jpg)</a>
        </div>
    </div>
</div>
</body>
</html>

总结
1 样式书写

div布局
导航栏，内容书写
清空样式
div大小定位
导航栏边框设置，大小，颜色，边框宽度，去掉下边框
导航栏样式设置，左浮动，大小，文字行高，文字位置，光标样式，上边距以及颜色，定位
设置内容div的大小，边框宽度以及颜色
设置子内容div属性为左浮动，且块级不显示
设置主内容页属性为块级显示（元素前后会带有换行符）
2 jQuery实现效果

$(function () {
           $(".tab li").mouseenter(function () {
               //给当前元素添加active这个样式
               //给当前这个元素的所有兄弟元素移除active这个样式  siblings
               $(this).addClass("active").siblings().removeClass("active");
               //让下面的div内容，根据上面tab栏菜单展示相应的内容
               //index（）获取当前元素序号
               var index=$(this).index();
               $(".products div").eq(index).addClass("selected").siblings().removeClass("selected");
           }) ;
        });

三常用DOM操作（属性和值的内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            background: gray;
            color: red;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
           //设置属性
            $("input[type='button']").eq(0).click(function () {
               $(this).attr("title","动态设置属性");
            });
            //获取属性
            $("input[type='button']").eq(1).click(function () {
               var st=$("input[type='button']").eq(0).attr("title");
               alert(st);
            });
            //删除属性
            $("input[type='button']").eq(2).click(function () {
               $("input[type='button']").eq(0).removeAttr("title");
            });
            //设置值
            $("input[type='button']").eq(3).click(function () {
               $("#txt").val("动态设置的值");
            });
            //获取值
            $("input[type='button']").eq(4).click(function () {
                var txt1=$("#txt").val();
                alert(txt1);
            });
            //设置html
            $("input[type='button']").eq(5).click(function () {
                //$("div").html("我是html内容");
                $("div").html("<p>我是p元素</p>");
            });
            //获取html
            $("input[type='button']").eq(6).click(function () {
                alert($("div").html());
            });
            //设置文本内容
            $("input[type='button']").eq(7).click(function () {
                $("div").text("动态创建的文本内容");
            });
            //获取文本内容
            $("input[type='button']").eq(8).click(function () {
                alert($("div").text());
            });
        });
    </script>
</head>
<body>
<input type="button" value="设置属性">
<input type="button" value="获取属性">
<input type="button" value="删除属性">
<input type="button" value="设置值">
<input type="button" value="获取值">
<input type="button" value="设置html">
<input type="button" value="获取html">
<input type="button" value="设置文本内容">
<input type="button" value="获取文本内容">
<div>
    <input type="text" id="txt">
</div>
</body>
</html>

总结

设置属性： $(this).attr("title","动态设置属性");
获取属性：var st=$("input[type='button']").eq(0).attr("title");
删除属性： $("input[type='button']").eq(0).removeAttr("title");
设置值：$("#txt").val("动态设置的值");
获取值：var txt1=$("#txt").val();
设置html： $("div").html("我是p元素");
获取html：alert($("div").html());
设置文本内容：$("div").text("动态创建的文本内容");
获取文本内容：alert($("div").text());

四节点操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").eq(0).click(function () {
            //追加节点
           $("div").append("<p>我是动态创建的p元素</p>");
            });

            //把前面这个元素追加给$("div")元素
        $("button").eq(1).click(function () {
            $("<p>我是动态创建的p元素</p>").appendTo($("div"));
            });

        $("button").eq(2).click(function () {
           //把前面这个元素在所有子元素的前面添加一个子元素
            $("div").prepend("<p>我是动态prepend创建的p元素</p>");
            });

        $("button").eq(3).click(function () {
            //把前面这个元素添加给后面这个$("div")元素的所有子元素的前面
            $("<p>我是动态prepend创建的p元素</p>").prependTo($("div"));
            });

        $("button").eq(4).click(function () {
            //往div的后面添加元素，他们是兄弟关系
            $("div").after("<p>我是div后面的p元素</p>");
            });

        $("button").eq(5).click(function () {
           //往div前面添加元素，他们是兄弟关系
            $("div").before("<p>我是div前面的p元素</p>");
            });

        $("button").eq(6).click(function () {
            //把前面的元素放到后面div元素的前面，他们是兄弟节点关系
            $("<p>我在哪？</p>").insertBefore($("div"));
            });

        $("button").eq(7).click(function () {
            //把前面的元素放到后面div元素的后面，他们是兄弟节点关系
            $("<p>我在哪？</p>").insertAfter($("div"));
            });

        $("button").eq(8).click(function () {
            //删除节点
            //$("div").remove();
            $(this).remove();//自杀
            });

        $("button").eq(9).click(function () {
            //清空节点元素
            // $("div").html("");清空子元素  推荐使用方法
            $("div").empty();
            });

        $("button").eq(10).click(function () {
            //复制
            //参数如果为true的话，那么之前的时间也会复制一份
            $("div").append($("p").clone());
            });

        $("button").eq(11).click(function () {
            //包裹元素
            $("span").wrap($("div"));
            });

        $("button").eq(12).click(function () {
            //包裹所有节点
            $("span").wrapAll($("div"));
            });

        $("button").eq(13).click(function () {
            //替换节点
            $("span").replaceWith("#d");
            });

        });
    </script>

</head>
<body>
<button>append 追加</button>
<button>appendTo 追加</button>
<button>prepend 往前面添加节点</button>
<button>prependTo 往前面添加节点</button>
<button>after 往后面添加节点</button>
<button>before 往前面添加节点</button>
<button>insertBefore</button>
<button>insertAfter</button>
<br>
<br>
<button>remove 删除选中元素</button>
<button>empty 清空子元素</button>
<button>clone 复制节点</button>
<button>warp 单个包裹</button>
<button>warpAll 所有包裹在一个node中</button>
<button>replaceWidth 替换</button>

<div>
    <h1>标题标题</h1>
    <h1>标题1标题</h1>
</div>
<p>我是外面的p元素，不是冬天添加的</p>
<span>小小小span
    <h2>小小span</h2>
</span>
<div id="d">
<h1>replaceWidth替换</h1>
</div>
</body>
</html>

append追加节点：

$("div").append("我是动态创建的p元素");

appendTo把前面这个元素追加给$("div")元素：

$("我是动态创建的p元素").appendTo($("div"));

prepend把前面这个元素在所有子元素的前面添加一个子元素:

$("div").prepend("我是动态prepend创建的p元素");

prependTo把前面这个元素添加给后面这个$("div")元素的所有子元素的前面

$("我是动态prepend创建的p元素").prependTo($("div"));

after往div的后面添加元素，他们是兄弟关系

$("div").after("我是div后面的p元素");

before往div前面添加元素，他们是兄弟关系

$("div").before("我是div前面的p元素");

insertBefore把前面的元素放到后面div元素的前面，他们是兄弟节点关系

$("我在哪？").insertBefore($("div"));

insertBefore把前面的元素放到后面div元素的后面，他们是兄弟节点关系

$("我在哪？").insertAfter($("div"));

remove删除节点

//$("div").remove();
$(this).remove();//自杀

empty清空节点元素

// $("div").html("");清空子元素推荐使用方法
$("div").empty();

clone复制

//参数如果为true的话，那么之前的时间也会复制一份
$("div").append($("p").clone());

wrap包裹元素

$("span").wrap($("div"));

wrapAll包裹所有节点

$("span").wrapAll($("div"));

replaceWith替换节点

$("span").replaceWith("#d");

DOM (javascript DOM节点操作)
DOM (javascript DOM节点操作) 本节目录查找DOM元素 DOM节点操作 javascript操...
DOM操作和节点操作
一样式操作总结添加样式 $("li").addClass("divItem"); 移除样式 $("li").e...
Dom操作
操作节点获取节点获取子节点更新DOM innerHTMLinnerTEXT 插入DOM appendChil...
05-DOM相关知识点讲解
DOM DOM内容主要分为四部分：什么是DOM和节点；获取节点；节点操作（3种）；属性操作（3种）。什么...
canvas 上添加事件绑定
Canvas 画布上绘制的视频图片等，因为均不是节点，我们也就无法获取图片的 DOM 节点来进行操作和添加事件。画...
JQuery---dom相关节点操作
dom相关节点操作 /* DOM操作管理属性...
第十七章 DOM基础
要点： DOM介绍查找元素 DOM节点节点操作什么是 DOM？ DOM即文档对象，针对HTML和XML文档的...
Vue解决了哪些问题
虚拟 dom：dom 操作时非常耗性能的，不再使用原生的 dom 操作节点，极大的解放 dom 操作，但具体操作的...
DOM
一.dom操作 dom的组成元素节点属性节点文本节点通过nodeType查看类型 1 元素节点 ,2 属性节...
DOM
一、对象基础（补充）二、DOM获取节点三、间接获取节点四、DOM节点的添加和删除五、DOM属性操作六、练...