JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点

最新推荐文章于 2024-04-17 08:48:05 发布

poorpenguin

最新推荐文章于 2024-04-17 08:48:05 发布

阅读量5.8k

点赞数 3

分类专栏：前端 JS

本文链接：https://blog.csdn.net/weixin_39141044/article/details/83582384

版权

文章目录

一、dom加载完毕执行js
- 1.1 jquery
- 1.2 js
二、创建节点
三、遍历节点
四、查找节点
五、插入节点
六、删除节点

一、dom加载完毕执行js

dom可以看成一个树形结构，dom的加载顺序就是从上到下，我们一再强调将js文件放在尾部，就是因为如果js脚本在dom文档构造之前执行，这样js就无法访问dom文档对象模型。

1.1 jquery

等待页面dom树加载完毕，再执行代码

写法一：标准写法
$(document).ready(function(){
   
	...
});

写法二：简写
$(function(){
   
	....
})
两种写法是等价的

等待页面所有资源（包括css样式表、dom树、图片、第三方框架）加载完毕，再执行代码

$(window).load(function(){
   
	...
});

总结：也就是说$(function(){...})会比$(window).load(function(){...})先执行

1.2 js

onload事件：等待页面所有资源（包括dom树、图片、第三方框架）加载完毕，再执行代码

window.onload = function(){
   
	...
}

DOMContentLoaded 事件：等待页面dom树加载完毕，再执行代码
jquery中使用的$(document).ready(function(){});实际上监听的就是 DOMContentLoaded 事件。

function domReady(fn){
   
    //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
    if ( document.addEventListener ) {
   
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
   
        IEContentLoaded(fn);
    }
    //IE模拟DOMContentLoaded
    function IEContentLoaded (fn) {
   
        var d = window.document;
        var done = false;
        //只执行一次用户的回调函数init()
        var init = function () {
   
            if (!done) {
   
                done = true;
                fn();
            }
        };

        (function () {
   
            try {
   
                // DOM树未创建完之前调用doScroll会抛出错误
                d.documentElement.doScroll('left');
            } catch (e) {
   
                //延迟再试一次~
                setTimeout(arguments.callee, 50);
                return;
            }
            // 没有错误就表示DOM树创建完毕，然后立马执行用户回调
            init();
        })();

        //监听document的加载状态
        d.onreadystatechange = function() {
   
            // 如果用户是在domReady之后绑定的函数，就立马执行
            if (d.readyState == 'complete') {
   
                d.onreadystatechange = null;
                init();
            }
        }
    }
}

二、创建节点

普通创建节点
1. 创建新的元素节点：document.createElement(‘元素名’)
2. 创建新的文本节点：document.createTextNode(‘文本内容’)
3. 创建新的片段节点：document.createDocumentFragment()
4. 创建新的注释节点：document.createComment(‘注释’)
高效创建节点
1. innerHTML
2. outerHTML
3. innerText
4. outerText

方法名	说明
document.createElement(‘元素名’)	创建新的元素节点
document.createTextNode(‘文本内容’)	创建新的文本节点
document.createComment(‘注释’)	创建新的注释节点
document.createDocumentFragment()	创建新的片段节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .li{
    list-style:none;height:50px;line-height:50px;width:100px;background-color:lightblue;text-align:center;}
  </style>
</head>
<body>
    <script>
    (function(){
    
    	var ulEle = document.createElement('ul');
    	for(var i=0; i<3 ; i++){
    
			var liEle = document.createElement('li');
    		liEle.className = 'li';    		
    		liEle.innerHTML = '第'+i+'个li';
    		ulEle.appendChild(liEle);
    	}
    	document.body.appendChild(ulEle);
    })();
    </script>
</body>
</html>

高效创建节点
当要创建的大批量的节点，使用createElement这类的方法创建节点就非常麻烦。

方法	说明
innerHTML	用来设置或获取当前标签的起始和结束里面的内容，在读模式下返回与调用元素的所有节点包括元素节点、注释节点、和文本节点对应的HTML标记；而在写模式下innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树安全替换调用元素原先的所有子节点。
outerHTML	返回调用它的元素及所有子节点的HTML标签

在写模式下会根据指定的HTML字符串创建新的outer指数，然后用outer指数完全替换调用的元素

2.1 document.createElement

该方法创建的 HTML5标签 是可以兼容IE8以下的浏览器，并在页面中正常显示该标签所设置的样式；参数可以是大小也可以是小写，但是多数情况下建议使用小写。

	var ulEle = document.createElement('ul');
    var liEle = document.createElement('li');

解决HTML5新元素不被IE6-8识别

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <style>
      /*html5*/
      article {
    
        font-size: 40px;
        color: red;
      }
    </style>
    <script> 
      (function() {
    
        if (! 
        /*@cc_on!@*/
        0) return;
        var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
        var i = e.length;
        while (i--){
    
          document.createElement(e[i]);
        }
      })();
    </script>
  </head>
  <body>
    <article>
      You are my sunshine.
    </article>
  </body>
</html>

2.5 innerHTML

用来设置或获取当前元素里面的所有子节点。

innerHTML有两种模式

最低0.47元/天解锁文章

poorpenguin

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点

一、dom加载完毕执行jsdom可以看成一个树形结构，dom的加载顺序就是从上到下，我们一再强调将js文件放在尾部，就是因为如果js脚本在dom文档构造之前执行，这样js就无法访问dom文档对象模型。1.1 jquery等待页面dom树加载完毕，再执行代码写法一：标准写法$(document).ready(function(){ ...});写法二：简写$(function...
复制链接

扫一扫