DOM数据绑定

最新推荐文章于 2024-01-08 00:35:33 发布

虚年

最新推荐文章于 2024-01-08 00:35:33 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript dom

本文链接：https://blog.youkuaiyun.com/m0_37068028/article/details/78268575

JavaScript 专栏收录该内容

76 篇文章

订阅专栏

本文介绍了DOM数据绑定、事件处理及列表元素动态添加的方法，并对比了不同添加方式的优劣。此外，还探讨了浏览器的重排与重绘机制及其对性能的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM数据绑定

<ul id="ul">
    <li>【 js 基础 】为什么 call 比 apply 快？</li>
    <li> Node.js 8.5 正式发布，新特性一览</li>
    <li>【服务端与客户端同构 —— Vue.js 应用框架 Nuxt.js</li>
</ul>

给元素动态绑定事件，改变背景色

  var oul = document.getElementById('ul');
  var oli = oul.getElementsByTagName('li');
  for (var i = 0; i < oli.length; i++) {
    oli[i].onmouseover = function () {
      this.style.backgroundColor = 'red';
    }
    oli[i].onmouseout = function () {
      this.style.backgroundColor = ''
    }
  }

给列表添加元素的几种方法

var arr = [
  {"title": "【 js 基础 】Javascript “继承”"},
  {"title": "【 js 基础 】作用域和闭包"},
  {"title": "如何为 Vue 项目写单元测试"},
  {"title": "了解 ES6 中的Symbol"},
  {"title": "WebAssembly 使用场景"}
];

1. appenChild()插入

for (var i=0;i<arr.length;i++){
    var li = document.createElement('li');
    var cur= arr[i];
    li.innerHTML=cur.title;
    oul.appendChild(li);
}

2. 字符串拼接

var html = '';
for (var i = 0; i < arr.length; i++) {
  var cur = arr[i];
  html += "<li>" + cur.title + "</li>";
}
oul.innerHTML += html;

3. 代码片段

var frg = document.createDocumentFragment();
for (var i=0;i<arr.length;i++){
    var cur = arr[i];
    var li = document.createElement('li');
    li.innerHTML = cur.title;
    frg.appendChild(li);
}
oul.appendChild(frg);