登录  /  注册
博主信息
博文 62
粉丝 7
评论 2
访问量 55725
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
前端入门:DOM 基础总结
我是郭富城
原创
1518人浏览过

前端入门:DOM 基础总结

1.1DOM 概念

DOM 全称为 Document Object Model,即文档对象模型。它是一套用来管理控制 html 文档的规则。

1.2 节点类型

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 1: 元素节点

  • 2: 属性节点

  • 3: 文本节点

  • 6: 注释节点

  • 9: 文档节点, document

  • 11: 文档片断节点

    document 节点又被叫做 document 对象。每个载入浏览器的 HTML 文档都会成为 document 对象。document 是 html 文档的根节点,每张网页都有自己的 document 节点。window.document 属性就指向这个节点。也就是说只要浏览器开始载入 HTML 文档,这个节点对象就存在了,可以直接调用。

1.3 获取 dom 元素

1.3.1 通过标签名获取元素,返回一个类数组(HTMLCollection)

//返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)node.getElementsByTagName("tagName");//标签获取元素var li = document.getElementsByTagName("li");

1.3.2 通过 id 获取页面元素

//获取带有指定 id 的节点(元素)document.getElementById("idName");//id获取元素var header = document.getElementById("header");

1.3.3 通过 class 名字获取页面元素,返回一个类数组

//返回包含带有指定类名的所有元素的节点列表document.getElementsByClassName("className");

注意:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

1.3.4 通过 name 名字获取页面元素

//返回包含带有指定名的所有元素的节点列表var first = document.getElementsByName("first");

1.3.5 通过 CSS 选择符方式获取页面元素

//querySelector:返回符合条件的第一个document.querySelector("selector");//返回符合条件的全部document.querySelectorAll("selector");//querySelector:返回符合条件的第一个var str = document.querySelector("li");//全部返回,每个li都是一个对象var str1 = document.querySelectorAll("li");

1.4 NodeList 与 HTMLCollection 区别

node.childNodes 结果返回类型是 NodeList,
node.children 结果返回类型是 HTMLCollection
node(document 或者其他不同节点).getElementsByXXX 结果返回类型是 HTMLCollection

唯一要注意的是 querySelectorAll 返回的是 NodeList ,但是实际上是元素集合,并且是静态的

1.4.1 NodeList 节点集合

NodeList 节点集合可以理解为 HTMLCollection 元素集合的父集,它包含了 DOM 对象的所有节点

  • 遍历节点
    因为 NodeList 对象是一个类似数组的对象, 且它自带了一个 forEach() 方法, 因此可以使用 forEach() 遍历, 它的用法和 Array 里面的 forEach() 是完全一样的.

  • 语法:

document.querySelectorAll("li").forEach((item, i, obj) {  console.log(i + " - " + item.textContent);});

这里的 item 为当前元素, i 为索引, obj 为整个 NodeList.

1.4.2 HTMLCollection 元素集合

HTMLCollection 元素集合可以理解为 NodeList 节点集合的子集,它只包括了元素集合。HTMLCollection 和 NodeList 一样包含了查询得到的 html 元素,length 属性和 item 方法,但没有 NodeList 的 entries, forEach, keys, values 这四个方法。

  • HTMLCollection:类数组

  • 键名: 由 0 开始的正整数

  • 有一个 length 属性,表示数量

  • 如何遍历

var parent = document.querySelector(".parent");for (var i = 0; i < parent.childElementCount; i++) {  console.log(parent.children.item(i));}

1.5 事件添加方式

1.5.1 给 html 元素绑定事件属性

<button onclick="show(this)">按钮</button><script>  var cl = console.log.bind(console);  //1. 给html元素绑定事件属性  function show(ele) {    var text = ele.innerText;    alert(text);  }</script>

1.5.2 给 html 元素添加属性

<button>按钮</button><script>  var btn = document.querySelector("button");  btn.onclick = function () {    alert(this.nodeName);  };</script>

1.5.3 监听器

<button>按钮</button><script>  var btn = document.querySelector("button");  // btn.addEventListener(事件类型, 事件回调函数, 传递机制)  btn.addEventListener(    "click",    function () {      alert(this.innerText);    },    // false: 冒泡阶段触发    false  );</script>

1.5.4 事件派发

<button>按钮</button><script>  var btn = document.querySelector("button");  btn.addEventListener(    "click",    function () {      alert(this.innerText);    },    false  );  // 创建一个事件对象  var ev = new Event("click");  // 不用点击,也会自动的触发点击事件  btn.dispatchEvent(ev);</script>

1.6 事件委托/代理

  • JavaScript 高级程序设计:事件委托还有一个名字叫事件代理,事件委托就是利用事件冒泡,制定一个时间处理程序,就可以管理某一类型的所有事件。

  • 案例:给每一个 li 项目添加一个点击事件

<ul>  <li>item1</li>  <li>item2</li>  <li>item3</li>  <li>item4</li>  <li>item5</li></ul><script>  事件委托/代理: 子元素上的事件会冒泡到父元素上的同名事件上触发  document.querySelector("ul").addEventListener("click", function (ev) {    alert(123456);  });</script>

1.7 时间的捕获和冒泡

1.8 总结

在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,性能优化的主要思想之一就是减少 DOM 操作。每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率越大,100 个 li 就要占用 100 个内存空间。如果要用事件委托,就会将所有的操作放到 js 程序里面,只对它的父级(如果只有一个父级)这一个对象进行操作,与 dom 的操作就只需要交互一次,这样就能大大的减少与 dom 的交互次数,提高性能;

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:图片做的很棒
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学