dom | 易学教程

dom元素高度、屏幕高度获取

阅读更多关于 dom元素高度、屏幕高度获取

JS获取屏幕高度: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft 网页正文部分上： window.screenTop 网页正文部分左： window.screenLeft 屏幕分辨率的高： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth JQuery获取屏幕高度: $(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document)

05-DOM的基本操作封装函数

阅读更多关于 05-DOM的基本操作封装函数

1.HTML部分 < div id = "box" > < p > 我是p </ p > < div class = "abc" > 我是div < span id = "text" > 我是span </ span > < p > sd </ p > </ div > < ul > < li > 我是li1 </ li > < li > 我是li2 </ li > < li > 我是li3 </ li > < li > 我是li4 </ li > </ ul > </ div > < div id = "res" > < h1 > 我是h1 </ h1 > < h2 > 我是h2 </ h2 > < h3 > 我是h3 </ h3 > < h4 > 我是h4 </ h4 > < h5 > 我是h5 </ h5 > < h6 > 我是h6 </ h6 > </ div > 2.js部分封装函数大部分会使用遍历 var oText = document . getElementById ( 'text' ); var oBox = document . getElementById ( 'box' ); /*----封装函数，返回该元素的第n层祖先元素-----*/ /* 1.返回第几层？ parentNoded 查询父节点 dom 节点 n 第几层祖先 */ function

02 创建虚拟DOM的两种方式

阅读更多关于 02 创建虚拟DOM的两种方式

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/babel.min.js"></script> 10 </head> 11 <body> 12 <div id="test1"></div> 13 <div id="test2"></div> 14 </body> 15 </html> 16  17 <script> 18 const msg="I like you."; 19 const myid="box1"; 20 var vh3=React.createElement('h3',{id:'myid'},msg);//创建虚拟DOM 21 ReactDOM.render(vh3

Vue双向数据绑定简易实现

阅读更多关于 Vue双向数据绑定简易实现

一、vue中的双向数据绑定主要使用到了Object.defineProperty（新版的使用Proxy实现的）对Model层的数据进行getter和setter进行劫持，修改Model层数据的时候，在setter中可以知道对那个属性进行修改了，然后修改View的数据。二、简易版双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Proxy双向数据绑定大概原理</title> </head> <body> <div id="app"> <input type="text" id="inpt"/> <span id="txt"></span> </div> <script> var inputDom = document.getElementById("inpt"), spanDom = document.getElementById("txt"), data = {} // 更新DOM function

从零开始学 Web 系列教程

阅读更多关于从零开始学 Web 系列教程

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新…… github：https://github.com/Daotin/Web 微信公众号：前端队长博客园：http://www.cnblogs.com/lvonve/ 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！前言昨天收到一个朋友的留言反馈，意思是说文章太多，找起来很麻烦，做个索引页就好了。这个建议特别好，于是下面就是整个《从零开始学 Web 开发》所有内容的索引，并且按照知识点的分类排列好，每一篇文章的主要内容也简单的列举出来。本索引将长期不定期更新…… 索引从零开始学 Web 之 HTML 从零开始学 Web 之 HTML（一）认识前端什么是前端网页组成 Web 标准浏览器内核认识 HTML HTML 结构标准标签分类开发工具从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等标签超链接特殊字符列表音乐标签滚动标签 head里面相关从零开始学 Web 之 HTML（三）表单表格表单标签语义化从零开始学 Web 之 CSS 从零开始学 Web 之 CSS（一）选择器 CSS概念选择器从零开始学 Web 之 CSS

what is react?

阅读更多关于 what is react?

现在最热门的前端技术，毫无疑问就是React。 React起源于Facebook公司的内部项目，他们认为现在的MVC不能满足他们的扩展需求，由于他们的代码库非常庞大，组织也非常复杂，所以每当添加一个新的功能时就变得异常的复杂，所以他们为了解决这个问题，提出了React。那么React是什么呢？其官网上说的是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES。一个Javascript库，用于构建用户界面。 React主要解决什么问题呢？他们的官网上有这么一句话：We built React to solve one problem: building large applications with data that changes over time. 构建那些会随时间变化的大型应用。在整个web的MVC架构中，你可以认为React是整个视图层，并且是一个高效的视图层。React提供了和以往不一样的看待视图层的方式，它以组件开发为基础。对于React而言，你的页面都是由一个个组件构成的，你可以通过分割组件的方式去实现复杂的页面或者某个功能模块。并且这些组件是可以被复用的。 React的另一大特点是：虚拟DOM节点。它让页面的渲染更加的高效，并且比直接操作真实DOM更加的可控。这两大特点使得React有了强大的渲染页面的能力。

DOM02-表单属性

阅读更多关于 DOM02-表单属性

inner text与inner html 共同点：都是用来操作标签内容。 inne rtext 把内容当文本来处理。获取时：会把html标签舍弃掉只获取文本内容。设置时：也不能识别标签，会把标签转换为实体字符。 inner text的兼容性火狐老版本不支持inner text属性，支持text content。 IE6，7，8不支持text content。 inner html 获取时:能够同时获取到文本和标签。设置时：也能识别设置标签。兼容性解决法获取时：先检测一下用inner能不能获取到，如果可以直接获取，如果不行用text content属性。按照以上思路封装一个函数，需要时直接用就可以了。 function getInnerText(element){ //能力检测 if(typeof element.innerText==="string"){ return element.innerText; }else{ return element.textContent; } } function setInnerText(element,value){ //能力检测 if（typeof element.innerText==="string"）{ element.innerText=value; }else{ element.textContent=value

Vue之DOM元素事件绑定_v-on指令

阅读更多关于 Vue之DOM元素事件绑定_v-on指令

1、主要作用主要作用：给DOM元素绑定事件。（v-on:事件名称 = “事件执行和函数引用”） 2、简写方法简写方法：事件绑定简写：@事件名称 = “事件执行和函数引用”。 3、常用事件修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 .native - 监听组件根元素的原生事件。 .once - 只触发一次回调。来源： https://www.cnblogs.com/jiapei/p/12458113.html

用 PHP 读取和编写 XML DOM

阅读更多关于用 PHP 读取和编写 XML DOM

// 用 DOM 读取 XML $doc = new DOMDocument(); $doc->load(‘test.xml’); $books = $doc->getElementsByTagName(“book”); foreach( $books as $book ){ $authors = $book->getElementsByTagName(“author”); $author = $authors->item(0)->nodeValue; // nodeValue属性可根据节点的类型来设置或返回某个节点的值。 $publishers = $book->getElementsByTagName(“publisher”); $publisher = $publishers->item(0)->nodeValue; $titles = $book->getElementsByTagName( ”title” ); $title = $titles->item(0)->nodeValue; echo ”Title: $title <br> Author: $author <br> Publisher: $publisher<br><hr><br>”; } /* 脚本首先创建一个 new DOMdocument 对象，用 load 方法把图书 XML 装入这个对象。之后，脚本

PHP Simple HTML DOM 使用

阅读更多关于 PHP Simple HTML DOM 使用

下载地址： https://github.com/samacs/simple_html_dom 文档地址 http://simplehtmldom.sourceforge.net/ 一直以来使用php解析html文档树都是一个难题。 Simple HTML DOM parser 帮我们很好地解决了这个问题。可以通过这个php类来解析html文档，对其中的html元素进行操作 (PHP5+以上版本)。解析器不仅仅只是帮助我们验证html文档；更能解析不符合W3C标准的html文档。它使用了类似jQuery的元素选择器，通过元素的id，class，tag等等来查找定位；同时还提供添加、删除、修改文档树的功能。当然，这样一款强大的html Dom解析器也不是尽善尽美；在使用的过程中需要十分小心内存消耗的情况。不过，不要担心；本文中，笔者在最后会为各位介绍如何避免消耗过多的内存。安装：下载后把simple_html_dom.php 引入即可。开始使用上传类文件以后，有三种方式调用这个类：从url中加载html文档从字符串中加载html文档从文件中加载html文档 // Create a DOM object $html = new simple_html_dom (); // Load HTML from a string $html-> load ( '<html>

订阅 dom