JS中的DOM

更新日期: 2019-06-24阅读: 1.6k标签: dom

一、入口函数

  (1) $(document).ready()简写为$(function(){}) dom结构绘制完成执行,而无需等到图片或其他媒体下载完毕;jq

  (2) $(window).load在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用;jq

  (3) window.onload=function(){}必须等到页面内包括图片的所有元素加载完毕后才能执行;js


二、dom选择器:

  (1) .getElementById();

  (2) .getElementsByTagName()[];  标签名

  (3) .getElementsByName()[];  只有部分标签name生效

  (4) .getElementsByClassName()[];  类名

  (5) .querySelector();  css选择器(1个),非实时。

  (6) .querySelectorAll();  CSS选择器(1组),非实时。


三、节点的类型:

  (1) 元素节点----1

  (2) 属性节点----2

  (3) 文本节点----3

  (4) 注释节点----8

  (5) document----9

  (6) DocumentFragment----11


四、节点的四个属性:

  (1) .nodeName;  //元素的标签名,以大写表示,只读

  (2) .nodeValue;  //Text或Comment节点的文本内容,可读可写

  (3) .nodeType;  //该节点的类型,只读

  (4) .attributes;  //Element节点的属性集合


五、节点方法:

  Node.hasChildNodes();  //检查元素节点是否含有子节点

  注:此子节点包含文本节点等


六、Element节点的属性:

  (1) .innerhtml  例:div.innerHTML += "<h1>ABC</h1>"

  (2) .innerText (火狐不兼容)/textContent (ie6不兼容)


七、Element节点的方法:

  (1) ele.setAttribute("属性名","属性值");

  (2) ele.getAttribute("属性名");

  注:dom.className;可直接读写class;

  (3) classList属性:用于操作类属性;

    classList.add("类名1","类名2",….);

    classList.contains("类名"); 判断是否包含;

    classList.remove("类名1","类名2",….);

    classList.toggle("");  切换


八、遍历节点树:

  (1) .parentNode;  父节点(最顶端为document)

  (2) .childNodes;  子节点们

  (3) .firstChild;  第一个子节点

  (4) .lastChild;  最后一个子节点

  (5) .nextSibling;  后面一个兄弟节点

  (6) .previousSibling;  前面一个兄弟节点


九、基于元素节点的遍历节点树:

  (1) .parentElement;  父元素节点

  (2) .childeren;  元素子节点们

  (3) node.childElementCount===node.children.length

  (4) .firstElementChild;

  (5) .lastElementChild;

  (6) .nextElementSibling;

  (7) .previousElementSibling; 


十、DOM扩展:

  (1) .getElementById;  //定义在Document.prototype上,

    即Element节点上不能使用;

  (2) .getElementsByName;  //定义在HTML.Document.prototype上,

    即非HTML中的document不能用(XML DOC; Ele);

  (3) .getElementsByTagName;  //定义Document.prototype和

    Element.prototype;

  (4) <body>;  document.body;

        <head>;  document.head;

        <HTML>;  document.documentElement;

  (5) .getElementsByClassName\.querySelectorAll\.querySelector在

    Document.proyotype和Element.prototype中均有定义;



链接: https://www.fly63.com/article/detial/3869

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

HTML文档解析和DOM树的构建

浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建

原生js获取DOM对象的几种方法

javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等

js实现DOM遍历_遍历dom树节点方法

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

归纳DOM事件中各种阻止方法

事件冒泡: 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.与此同时,我们还需要了解dom事件绑定处理的几种方式:

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!