首页 > 代码库 > JQuery中的DOM操作

JQuery中的DOM操作

2024-08-15 01:38:39   220人阅读

什么是DOM？

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

在 1998 年，W3C 发布了第一版的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。 DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档

HTML-DOM

HTML-DOM 在使用JavaScript和DOM为HTML文件编写脚本，有许多专属于HTML-DOM的属性. HTML-DOM的出现甚至比DOM Core还要早，它提供一些更简明的符号来描述各种HTML元素的属性。    

例如： 使用HTML-DOM来获取表单对象 的方法： document.forms

CSS-DOM

CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果

设置某个元素style对象字体颜色的方法： elements.style.color = “red”;

查找节点

元素可以通过text()方法读取其中的html内容，相当于DOM的innerHTML属性

插入节点

 技术分享

例如：

 <script src="http://www.mamicode.com/jquery.js"></script>
    <script>
        $(function () {
            var xj = " <li title=‘香蕉‘>香蕉</li>";
            var xg = " <li  title=‘西瓜‘>西瓜</li>";
            var ll = " <li title=‘榴莲‘>榴莲</li>";
            var bl = " <li title=‘菠萝‘>菠萝</li>";
            var kb = " <li title=‘科比‘>科比</li>";
            $("ul").append(xj);  //添加在最后
            $(xg).appendTo("ul");
            $("ul").prepend(ll);   //添加再前面
            $(bl).prependTo("ul");
            $("ul li[abc]").after(kb);
        });
    </script>
</head>
<body>
    <ul>
        <li title=‘苹果‘>苹果</li>
        <li title=‘橘子‘ abc=‘bc‘>橘子</li>
        <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>
 
JQuery中的DOM操作






























        

            
                
                  
                
                

                    联系

                    我们