dom

逆战班:DOM获取元素对象

戏子无情 提交于 2020-03-08 13:26:57
DOM: 文档对象模型( Document Object Model ,简称DOM) . DOM树 文档:一个页面就是一个文档,在DOM中使用document表示 元素:页面中的所有标签都是元素,DOM中使用element表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示 DOM以上内容都看做对象。 如何获取元素: 1根据ID获取 .getElementById() <div id="name">hellow world</div> <script> var name_div=document.getElementById('name'); console.log(name_div); </script> 2通过标签名获取 .getElementsByTagName() <ul> <li>A1</li> <li>A2</li> <li>A3</li> <li>A4</li> </ul> <script> var lis=document.getElementsByTagName('li'); console.log(lis); </script> 注意 : 返回的值是以伪数组的形式来存储的,可以通过遍历的方式 来取出所有的元素对象 <ul> <li>A1</li> <li>A2</li> <li>A3</li> <li>A4</li> <

js操作DOM对象

匆匆过客 提交于 2020-03-08 05:41:57
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点名称 nodeType 节点类型 nodeValue 节点值 setAttribute("属性名","属性值") getAttribute("属性名") 根据属性名获取对应的属性值 getAttributeNode("属性名") 获取的是属性节点 createElement() 新增节点 insertBefore(newLi,li) 把newLi放在li之前 replaceChild(newLi,li)把newLi替换li的位置 removeChild()删除指定的子节点 parentNode 获取父节点 appenChild()追加子节点 通过js中的style属性可以为节点动态的增加css样式 style.属性名 之前css的属性名 background-color 现在属性名 backgroundColor className用来动态的给节点设置class属性! tabs选项卡功能的实现 offsetLeft 返回元素左边距 到 父级的左边距 offsetTop 返回元素上边距 到 父级的上边距 offsetHeight 元素的高度 offsetWidth 元素的宽度

css加载会造成阻塞吗?

假如想象 提交于 2020-03-08 05:36:07
之前面试今日头条的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。 为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度 打开chrome控制台(按下F12),可以看到下图,重点在我画红圈的地方 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项 这样,我们对资源的下载速度上限就会被限制成20kb/s,好,那接下来就进入我们的正题 css加载会阻塞DOM树的解析渲染吗? 用代码说话: <!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0) </script> <link href="https:/

Dom 节点

若如初见. 提交于 2020-03-08 04:36:14
节点: parentNode 父节点 childNodes 子节点 firstChild 第一个子节点 lastChild 最后一个子节点 nextSibling 下一个兄弟节点 perviousSibling 前一个兄弟节点 元素节点: parentElement 父元素节点 childern 子元素节点 firstElementChild 第一个元素节点 lastElementChild 最后一个元素节点 nextElementSibling 下一个元素节点 perviousElementSibling 最后一个元素节点 变量.childElementCount === 变量.childern.length 当变量的长度 节点分为: 元素节点 1 属性节点 2 文本节点 3 注释节点 8 document 节点 9 DocumentFragment 文档碎片节点 11 节点的四个属性 nodeName 元素的标签名,以大写形式表示,只读 nodeValue Text节点或者Coumment节点的文本内容,可读写 nodeType 该节点的类型,只读 attributes Element节点的属性集合 节点的方法: hasChildNodes(); 来源: CSDN 作者: 巷陌i 链接: https://blog.csdn.net/lzDevastator/article

前端 - js - 编程题6 - DOM节点查找

早过忘川 提交于 2020-03-08 03:57:22
题目描述 查找两个节点的最近的一个共同父节点,可以包括节点自身 输入描述: oNode1 和 oNode2 在同一文档中,且不会为相同的节点 function commonParentNode(oNode1, oNode2) { if(oNode1.contains(oNode2)){ return oNode1; }else{ return commonParentNode(oNode1.parentNode, oNode2);//使用递归的思路往上查找,找到一个节点的父节点,看他是否包含另一个DOM节点 } } function commonParentNode(oNode1, oNode2) { var on1_parents = getParents(oNode1); var on2_parents = getParents(oNode2); var i = on1_parents.length; var j = on2_parents.length; for(; i >= 0 && j >= 0 && on1_parents[i] === on2_parents[j]; i--, j--); return on1_parents[i+1]; } function getParents(oNode) { var parents = []; var parent =

vue 的diff算法

一世执手 提交于 2020-03-07 21:13:07
vue的diff位于patch.js文件中,复杂度为O(n)。 听大神说了解diff过程可以让我们更高效的使用框架,工作和女朋友都更加好找了,我们赶快了解哈~。 了解diff过程,我们先从虚拟dom开始。 虚拟dom 所谓的virtual dom,也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM节点 dom diff 则是通过JS层面的计算,返回一个patch对象,即补丁对象,在通过特定的操作解析patch对象,完成页面的重新渲染, 上一张图让大家更加清晰点: 到这里有童鞋可能会问,模拟DOM是干嘛为什么要这样做?虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTextNode创建的就是真实节点。 我们可以做个试验。打印出一个空元素的第一层属性,可以看到标准让元素实现的东西太多了。如果每次都重新生成新的元素,对性能是巨大的浪费。 var odiv = document . createElement ( 'div' ) ; for ( var k in odiv ) { console . log ( k ) } 看看你的打印台,有你想要的结果。 实现步骤 用JavaScript对象模拟DOM 把此虚拟DOM转成真实DOM并插入页面中

前端web之JavaScript DOM(5)

こ雲淡風輕ζ 提交于 2020-03-07 21:10:18
JS HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素。 DOM文档操作 查找 HTML 元素 方法 描述 例子 document.getElementById(id) 通过元素 id 来查找元素 查找 id=“intro” 的元素:let myElement = document.getElementById(“intro”); document.getElementsByTagName(name) 通过标签名来查找元素 查找所有 <p> 元素: myElement = document.getElementsByTagName(“p”); document.getElementsByClassName(name) 通过类名来查找元素 查找包含 class=“intro” 的所有元素的列表:document.getElementsByClassName(“intro”); document.querySelectorAll(“tag.css_name”) CSS 选择器查找 HTML 元素 返回 class=“intro” 的所有 <p> 元素列表: let el=document.querySelectorAll(“p

vue列表拖拽排序功能实现

人盡茶涼 提交于 2020-03-07 07:58:56
1.实现目标:目标是输入一个数组,生成一个列表;通过拖拽排序,拖拽结束后输出一个经过排序的数组。 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束后再根据实际的dom节点遍历得出新的数组。 2.2使用mousedown,mouseover等鼠标事件来实现,每次监听事件时,仅改动列表项的样式transform,而不操作实际的dom顺序。拖拽结束时,根据transform计算数组项顺序,得出新数组用vue数据驱动的方式重绘列表,重置所有样式。 总的来说就是可以通过不同的监听事件(drag、mouseover),按不同的顺序操作Dom(1.先操作实际dom,再添加动画,在输出数组;2。不操作实际dom,仅改变transfrom,得出新数组,用新数组生成新列表来更新节点)。 3.实际代码 3.1第一种实现 html部分。(被拖拽的元素需要设置draggable=true,否则不会有效果) <div id="app"> <ul @dragstart="onDragStart" @dragover="onDragOver" @dragend="onDragEnd" ref="parentNode"> <li v-for="(item,index) in data" :key="index" class="item" draggable=

浏览器渲染页面过程

好久不见. 提交于 2020-03-07 03:45:50
渲染过程 1.解析html文件,先是head,后是body 2.如果头部有外部的css链接,就去下载该css,如果有js链接也去下载 3.解析body部分,并生成DOM树,同时浏览器主进程去下载CSS 4.CSS文件下载完成,解析CSS文件成树形的数据结构(CSSOM树),然后结合DOM树合并成RenderObject树 5.布局(layout):布局RenderObject树,负责RenderObject树中的元素的尺寸,位置等计算 6.绘制(painting):绘制RenderObject树,绘制页面的像素信息,绘制到页面上。用户可以看到了 其中,前四步执行的比较快,5.6步执行的比较耗时。这是因为可能会发生回流(也叫重排,reflow。重新执行步骤5)及重绘(repaint,重新执行步骤6)。 重排和重绘到底是啥意思呢?接下来,对以上六个步骤进行详解的同时再解释重排和重绘: 第1.2.3步可以统称为构建DOM树: 当浏览器接收到服务器响应来的HTML文档后,会遍历文档节点,生成DOM树。需要注意的是,DOM树的生成过程中可能会被CSS和JS的加载执行而阻塞。 在这一步完成的时候,可能会发生 渲染阻塞 渲染阻塞 :当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行,然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建

前端之BOM和DOM

眉间皱痕 提交于 2020-03-06 14:48:06
一. BOM和DOM   JavaScript分为ECMAScript, BOM, DOM.   BOM( Browser Object Model )是指浏览器对象模型, 它使JavaScript有能力与浏览器进行交互.   DOM( Document Object Model )是指文档对象模型, 通过它,可以访问HTML文档的所有元素. 二. window对象   所有浏览器都支持window对象. 它表示浏览器窗口.   所有文档包含框架( frame或iframe标签 ), 浏览器会为HTML文档创建一个window对象, 并为每个框架创建一个额外的window对象.   没有应用于window对象的公开标准,不过所有浏览器都支持该对象.   所有JavaScript全局对象,函数以及变量均自动成为window对象的成员.   全局变量是window对象的属性,全局函数是window对象的方法.   一些常用的window方法 :     · window.innerHeight - 浏览器窗口的内部高度     · window.innerWidth - 浏览器窗口的内部宽度     · window.open() - 打开窗口     · window.close() - 关闭当前窗口   window 子对象 :      1. navigator对象