js DOM(3)

最新推荐文章于 2024-07-16 19:32:16 发布
最新推荐文章于 2024-07-16 19:32:16 发布
阅读量128 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37243717/article/details/79489697
版权

排序小实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var oBtn = document.getElementById("btn");
                var oList = document.getElementById("list");
                var oLi = oList.getElementsByTagName("li");
                var bool = true;
                oBtn.onclick = function(){
                    var arr = [];
                    for(var i = 0; i < oLi.length; i++){
                        arr.push( oLi[i] );    //把五个li对象装入数组
                    }
                    //对五个li对象进行一个大小的排序，通过大小的排序
                    arr.sort(function(num1,num2){
                        if(bool){
                            return parseInt(num1.innerHTML) - parseInt(num2.innerHTML);  //从小到大
                        }else{
                            return parseInt(num2.innerHTML) - parseInt(num1.innerHTML);  //从大到小
                        }
                    });
                    for(var i = 0; i < arr.length; i++){
                        oList.appendChild(arr[i]);
                    }
                    bool = !bool;
                }
            }
        </script>
    </head>
    <body>
        <button id="btn">确定</button>
        <ul id="list">
            <li>20$:足球</li>
            <li>50$:排球</li>
            <li>30$:篮球</li>
            <li>2$:羽毛球</li>
            <li>1$:乒乓球</li>
        </ul>
    </body>
</html>

createTextNode()方法

<!DOCTYPE html>
<!--

    createTextNode：创建文件节点

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var oText = document.createTextNode("我是一个创建的文本节点");
                alert(oText.nodeType);   //打印3
            }
        </script>
    </head>
    <body>
    </body>
</html>

insertBefore(方法)

<!DOCTYPE html>
<!--

    insertBefore：把新节点插入到指定节点的前面；

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var obj = document.createElement("li");
                obj.innerHTML = "我是一个新创建的个li";
                obj.style.background = "green";

                var oLi1 = document.getElementById("li1");
                //父节点.insertBefore(要插入的新节点，指定的节点);
                oLi1.parentNode.insertBefore(obj,oLi1);
            }
        </script>
    </head>
    <body>
        <ul id="list">
            <li>这里是第1个li标签</li>
            <li>这里是第2个li标签</li>
            <li id="li1" style="background:red">这里是第3个li标签</li>
            <li>这里是第4个li标签</li>
            <li>这里是第5个li标签</li>
        </ul>
    </body>
</html>

自定义insertAfter()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

            window.onload = function(){

                var obj = document.createElement("li");
                obj.innerHTML = "我是一个新创建的个li";
                obj.style.background = "green";

                var oLi1 = document.getElementById("li1");

                // oLi1.parentNode.insertBefore(obj,oLi1.nextSibling);

                function insertAfter(newObj,obj){
                    obj.parentNode.insertBefore(newObj,obj.nextSibling);
                }
                insertAfter(obj,oLi1);
            }
        </script>
    </head>
    <body>

        <ul id="list">
            <li>这里是第1个li标签</li>
            <li>这里是第2个li标签</li>
            <li id="li1" style="background:red">这里是第3个li标签</li>
            <li>这里是第4个li标签</li>
            <li>这里是第5个li标签</li>
        </ul>

    </body>
</html>

replaceChild()方法

<!DOCTYPE html>
<!--

    replaceChild：把新节点替换旧节点

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

            window.onload = function(){

                //新创建一个li节点对象
                var obj = document.createElement("li");
                obj.innerHTML = "我是一个新创建的个li";
                obj.style.background = "green";


                var oLi1 = document.getElementById("li1");

                oLi1.parentNode.replaceChild(obj,oLi1);

            }

        </script>
    </head>
    <body>

        <ul id="list">
            <li>这里是第1个li标签</li>
            <li>这里是第2个li标签</li>
            <li id="li1" style="background:red">这里是第3个li标签</li>
            <li>这里是第4个li标签</li>
            <li>这里是第5个li标签</li>
        </ul>

    </body>
</html>

cloneNode()方法

<!DOCTYPE html>
<!--

    cloneNode()方法：复制节点

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

            window.onload = function(){

                var oLi1 = document.getElementById("li1");

                var obj = oLi1.cloneNode(true);             //这里可以有一个可选参数 true
                //alert(obj == oLi1);     //打印false  不相等

                document.getElementById("list").appendChild(obj);

            }

        </script>
    </head>
    <body>

        <ul id="list">
            <li>这里是第1个li标签</li>
            <li>这里是第2个li标签</li>
            <li id="li1" style="background:red">这里是第3个li标签</li>
            <li>这里是第4个li标签</li>
            <li>这里是第5个li标签</li>
        </ul>

    </body>
</html>

removeChild()方法

<!DOCTYPE html>
<!--
    removeChild()方法：移除节点
 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

            window.onload = function(){

                var oLi = document.getElementById("li1");
                oLi.parentNode.removeChild(oLi);

            }

        </script>
    </head>
    <body>
         <ul id="list">
            <li>这里是第1个li标签</li>
            <li>这里是第2个li标签</li>
            <li id="li1" style="background:red">这里是第3个li标签</li>
            <li>这里是第4个li标签</li>
            <li>这里是第5个li标签</li>
        </ul>
    </body>
</html>
Casablanca_jhBi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是DOM0,DOM2,DOM3？
云端-公子清
03-29 4786
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互;比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。 本文就将带大家深入浅出地了解DOM事件的那些属性和方法。 1.DOM级别与DOM事件： DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。 有人可能会疑惑，为
jest-environment-jsdom-latest:玩笑环境使用最新的jsdom API和功能
04-29
笑话环境jsdom最新 在Jest环境中使用最新的jsdom API和功能。 安装 npm install jest-environment-jsdom-latest 用法 在index.spec.js或任何版本中： /** * @jest -environment jsdom-latest */ test ( 'use the...
DOM3
zxfly6的博客
03-19 596
Element对象1. 特征相关的属性Element.id，Element.tagName，Element.innerHTML，Element.outerHTML（包含标签定义本身）Element.classNameElement.classList:add/remove/contains/toggle/item/toStringvar asia = document.getElementById...
DOM2和DOM3
wobushixiaobailian的博客
10-09 585
文章目录1 DOM2和DOM3的变化1.1 针对XML命名空间的变化1.2 其他方面的变化2 操作样式的DOM API2.1 访问元素的样式3 DOM遍历与范围   DOM1级主要定义的是HTML和XML的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力。   DOM2和DOM3又可以分为许多模块，如下： DOM2核心 DOM2视图 DOM2事件 DOM2样式 DOM2遍历...
DOM0、DOM1、DOM2、DOM3事件区别
不丶甜的博客
03-27 8825
DOM事件 DOM 0级事件具有极好的跨浏览器优势，会以最快的速度绑定。某一个元素的同一个行为绑定不同的方法在行内会分别执行。某一个元素的同一个行为绑定不同的方法在script标签中后面的方法会覆盖前面的方法。 <body> // 某一个元素的同一个行为绑定不同的方法在行内会分别执行 <div id="box" "fun1();fun2()">点我</...
第三天_DOM
weixin_45513733的博客
02-11 260
第三天 - Web APIs 学习目标： 能够使用removeChild()方法删除节点 能够完成动态生成表格案例 能够使用传统方式和监听方式给元素注册事件 能够说出事件流执行的三个阶段 能够在事件处理函数中获取事件对象 能够使用事件对象取消默认行为 能够使用事件对象阻止事件冒泡 能够使用事件对象获取鼠标的位置 能够完成跟随鼠标的天使案例 1.1. 节点操作 1.1.1 删除节点 node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。 <button
JavaScript DOM 对象详解
最新发布
xycxycooo的博客
07-16 875
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
JavaScript之DOM
qq_43751200的博客
06-05 1774
DOM
jsdom：各种Web标准JavaScript实现，用于Node.js
02-03
jsdom是许多Web标准（特别是WHATWG 和标准）的纯JavaScript实现，可与Node.js一起使用。 通常，该项目的目标是模拟Web浏览器的子集，从而足以用于测试和抓取实际的Web应用程序。 jsdom的最新版本需要Node.js v10或...
dom.js:微型javascript dom库
05-03
DOM.js DOM.js是一个轻量级的快速跨浏览器（IE 8 +，FF31 +，SF5 +，CH31 +，OP24 +）库，用于DOM遍历，操纵和事件处理。 Dom.js还包括用于简化跨浏览器拖动操作的拖动库。 仅压缩并压缩了5KB！ API参考 目录 DOM...
x3dom:使用 R 和 Shiny 创建 x3dom 和 d3.js 图形的工具
07-14
使用 d3.js、R 和 Shiny 创建 x3dom 3D 图形的基本工具和示例。 例子： library( " shiny " ) runApp(system.file( " examples/shiny " , package = " x3dom " ))
browser-env：使用jsdom模拟全局浏览器环境
02-06
浏览器环境 使用模拟全局浏览器环境。 这使您可以轻松或不费劲地在Node.js 6或更高版本... jsdom明确jsdom 。 在某些情况下，这可能适合您的用例，但请仔细阅读链接的Wiki页面，并确保您了解警告。 如果您不需要全局启
前端重新学习（5）DOM与DOM2、DOM3区别以及DOM2新特性
qq_16546829的博客
08-30 4967
------------摘抄自他人笔记(http://itbilu.com/javascript/js/Vyxodm_1g.html、https://blog.csdn.net/pxy_lele/article/details/49755071) 感谢分享---------------------- 目录 DOM0、DOM1、DOM2、DOM3的区别 DOM0 DOM0与DHTML ...
html5 js 读取csv文件
热门推荐
Casablanca
04-06 1万+
//读取文件 function readParseFiles(callback) { var data = []; var files = []; files.push(document.getElementById('file0').files[0], document.getElementById('fil...
js 操作元素属性、操作元素样式、display(none、block)
Casablanca
03-09 1万+
js操作元素属性 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Keywords" content="关键字,关键词"&gt; &lt;meta name=
js读取xlsx文件成数组
Casablanca
04-08 3581
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="jquery-2.2.1.min.js" type="text/javascript"&gt;&lt;/script&am
d3.js 解析csv文件
Casablanca
03-07 3362
var dataset = []; d3.csv("sample.csv", function(data) { dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; }); console.log(dataset[0]...
js 文字的放大缩小案例
Casablanca
03-09 2018
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Keywords" content="关键字,关键词"&gt; &lt;meta name="Descri
js、匿名函数、闭包、回调函数
Casablanca
12-03 1846
匿名函数：就是没有名字的函数 function(){ //这里就是一个匿名函数，但是这个直接写会报错 alert("胖胖"); } //可以把一个匿名函数赋值一个变量 var fin = function(){ alert("胖胖"); }; alert(fin); fin(); //调用函数 //定义一个自调用函数 (function(){ a...
JavaScript DOM编程艺术探索
"JavaScript DOM编程艺术，深入探讨JavaScript与DOM的关系，以及它们在网页交互中的重要性。" 在网页设计领域，JavaScript与DOM是不可或缺的技术工具，它们共同塑造了现代网页的交互性和动态性。JavaScript是一种由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值