DOM节点操作之增删改查

document.write() 可以向文档中添加节点

但是有个致命问题，会把文档原有的节点全部清空

因此不推荐使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    这是原有的节点哦~

    <script>

        myReady(function(){

            document.write("这是document.write创建的节点！");

        });

    </script>

</body>

</html>

create系列方法：

document.createElement  创建元素节点

document.createTextNode 创建文本节点

document.createComment 创建注释节点

document.createDocumentFragment 创建文档片段节点

.appendChild() 追加子元素

document.body.insertBefore(要插入的节点，插入的位置);  在指定位置前插入节点

.firstChild  第一个子元素节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <ul id="list"></ul>

    <script>

        myReady(function(){

            var comment=document.createComment("这是注释呀");

            var ul=document.getElementById("list");

            var li=null;

            var fragment=document.createDocumentFragment();

            for(var i=0;i<3;i++){

                li=document.createElement("li");

                li.appendChild(document.createTextNode("item"+(i+1)));

                fragment.appendChild(li);

            }

            ul.appendChild(fragment);

            document.body.insertBefore(comment,ul);

        });

    </script>

</body>

</html>

在IE6-8中，createElement可以用来创建文档中本不存在的元素

可以用来做html5shiv，用于低版本IE兼容html标签元素

document.createElement()创建的HTML5标签是可以兼容IE8以下的浏览器，并在页面中正常显示该标签所设置的样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        article{color:orange;}

    </style>

</head>

<body>

    <article>直接添加html5元素在IE8以下无法识别</article>

<script>

    var article=document.createElement("article");

    article.innerHTML="这是document.createElement创建的HTML5元素";

    document.body.appendChild(article);

</script>

</body>

</html>

.split() 字符串转数组

IE条件编译语句 /*@cc_on  @*/   里面的内容只有IE会执行，其余浏览器会按照注释来处理，不会执行，可以用于区别是否是IE浏览器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        article{

            font-size:14px;

            color:orange;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            (function(){

                if(!/*@cc_on!@*/0) return;

                //所有html5新增元素

                var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");

                //获取长度

                var len=elements.length;

                //循环添加这些元素

                while(len--){

                    document.createElement(elements[i]);

                }

            })();//匿名函数自执行，可以避免污染全局

        });

    </script>

</head>

<body>

<article>这是html5元素</article>

</body>

</html>

以上是错误的，html5shiv代码不能写在domReady中，因为创建元素需要在dom树加载之前完成

以下是正确写法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        article{

            font-size:14px;

            color:orange;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        (function(){

            if(!/*@cc_on!@*/0) return;

            //所有html5新增元素

            var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");

            //获取长度

            var len=elements.length;

            //循环添加这些元素

            while(len--){

                document.createElement(elements[len]);

            }

        })();//匿名函数自执行，可以避免污染全局

    </script>

</head>

<body>

<article>这是html5元素</article>

</body>

</html>

高效创建节点的方法

innerHTML

outerHTML

innerText

outerText

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <ul id="list"></ul>

    <script>

        var ul=document.getElementById("list");

        var str="<li>item1</li>"+

                "<li>item2</li>"+

                "<li>item3</li>";

        ul.innerHTML=str;

    </script>

</body>

</html>

使用innerHTML的限制：

IE6~8中，要求字符串的最左边不能出现空格，否则会被移除

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        div{

            border:2px solid pink;

            background:#abcdef;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box"></div>

    <script>

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

        var str="  这是一句话哦~";

        box.innerHTML=str;

    </script>

</body>

</html>

大多数浏览器来说，使用该方法添加的script脚本是无效的，不会执行

script属于无作用域元素，使用innerHTML添加时会被要求删除

因此要求script必须在有作用域的元素之后，首选<input type="hidden">

并且需要给script添加defer属性

这种做法在IE6-8是有效的，在IE高版本以及其他浏览器中依旧无效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        div{

            border:2px solid pink;

            background:#abcdef;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box"></div>

    <script>

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

        var str="<input type='hidden'><script defer>alert('hello~');<\/script>";

        box.innerHTML=str;

    </script>

</body>

</html>

不能单独创建style  meta  link等元素

除非也是放置在有作用域的元素之后，如<input type="hidden">

并且只在IE6-8中有效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box"></div>

    <script>

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

        var str="<input type='hidden'><style>body{background:#abcdef;}<\/style>";

        box.innerHTML=str;

    </script>

</body>

</html>

innerHTML和outerHTML的区别：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box"><b>喵喵喵</b></div>

    <script>

        console.log(box.innerHTML);//<b>喵喵喵</b>

        console.log(box.outerHTML);//<div id="box"><b>喵喵喵</b></div>

    </script>

</body>

</html>

innerText  提取元素中所有的文本节点

只有文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box">开始~<b>喵喵喵~</b>结束~</div>

    <br>

    <div id="new1"></div>

    <div id="new2"></div>

    <script>

        console.log(box.innerText);//开始~喵喵喵~结束~

        console.log(box.innerHTML);//开始~<b>喵喵喵~</b>结束~

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

        new1.innerHTML="<b>通过innerHTML添加的</b>";

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

        new2.innerText="<b>通过innerText添加的</b>";

    </script>

</body>

</html>

低版本firefox不支持innerText

使用：textContent 兼容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box">开始~<b>喵喵喵~</b>结束~</div>

    <script>

        //获取innerText

        function getInnerText(ele){

            return (typeof ele.textContent=="string")?ele.textContent:ele.innerText;

        }

        //设置innerText

        function setInnerText(ele,text){

            if(typeof ele.textContent=="string"){

                ele.textContent=text;

            }else{

                ele.innerText=text;

            }

        }

        console.log(getInnerText(box));

        setInnerText(box,"这是通过setInnerText设置的文本哦")

    </script>

</body>

</html>

outerText在获取时和innerText相同

在设置时会替换掉本身的元素，因此不建议使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box">开始~<b>喵喵喵~</b>结束~</div>

    <script>

        console.log(box.outerText);

        box.outerText="这是通过outerText设置的文本哦";

    </script>

</body>

</html>

JS DOM创建节点的更多相关文章

  1. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  2. DOM创建节点

    1.DOM--document object model 常用的节点类型: 元素节点:(标签) 属性节点:(标签里的属性) 文本节点:(文本节点) 2,document有个属性叫nodetype,返回 ...

  3. js添加创建节点和合并节点

    var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123& ...

  4. js dom 创建table标签和子属性， 以及创建多选框

    代码: <div class="Category"> <span id="Edit_headerTitle">Edit Categori ...

  5. js递归方法创建节点

    var jsonData = [{,,"subnetRemark":"状态自带","subnetName":"中心网络" ...

  6. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  7. jQuery_DOM学习之------创建节点及节点属性

    DOM创建节点及节点属性 一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元 ...

  8. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  9. js创建节点及其属性

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 使用IDEA构建Spring-boot多模块项目配置流程

    使用IDEA构建Spring-boot多模块项目配置流程 1.创建项目 点击Create New Project 在左侧选中Spring Initializer,保持默认配置,点击下一步. 在Grou ...

  2. Java8新特性一点通 | 回顾文件操作和watchService文件变更监视操作

    文件操作 WatchService 文件操作 今天重温了一些文件操作: - Files.list() 遍历文件和目录 //List all files and sub-directories usin ...

  3. mint ui的tabBar监听路由变化实现tabBar切换

    说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应 ...

  4. 【WPF学习】第三十六章 样式基础

    前面三章介绍了WPF资源系统,使用资源可在一个地方定义对象而在整个标记中重用他们.尽管可使用资源存储各种对象,但使用资源最常见的原因之一是通过他们的保存样式. 样式是可应用于元素的属性值集合.WPF样 ...

  5. JAVA byte数组转化为16进制字符串输出

    最简单的方法: 利用javax.xml.bind包下的DatatypeConverter printHexBinary public static java.lang.String printHexB ...

  6. Angular 从入坑到挖坑 - Angular 使用入门

    一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...

  7. 最大连续和（dp复习）

    最大连续和:给出一段序列,选出其中连续且非空的一段使得这段和最大. stdin: 7 2 -4 3 -1 2 -4 3 stdout: 4 状态转移方程:dp[i]=max(dp[i-1]+a[i], ...

  8. 纯JavaScript实现页面行为的录制

    在网上有个开源的rrweb项目,该项目采用TypeScript编写(不了解该语言的可参考之前的<TypeScript躬行记>),分为三大部分:rrweb-snapshot.rrweb和rr ...

  9. TCP、UDP 协议的区别

    TCP 面向连接 可靠 传输形式:字节流 传输效率:慢 所需资源:多 首部字节:20-60 应用场景:要求通讯数据可靠(如文件传输.邮件传输) UPD 无连接 不可靠 传输形式:数据报文段 传输效率: ...

  10. C++括号匹配检测（用栈）

    输入一串括号,包括圆括号和方括号,()[],判断是否匹配,即([]())或[([][])]为匹配的正确的格式,[(])或([())为不匹配的格式. #include<iostream> # ...