dom | 易学教程

第10章 DOM

阅读更多关于第10章 DOM

第10章 DOM 10.1 节点层次 10.1.1 Node 类型 10.1.2 Document 类型 10.1.3 Element 类型 10.1.4 Text 类型 10.1.5 Comment 类型 10.1.6 CDATASection 类型 10.1.7 DocumentType 类型 10.1.8 DocumentFragment 类型 10.1.9 Attr 类型 10.2 DOM 操作技术 10.2.1 动态脚本 10.2.2 动态样式 10.2.3 操作表格 10.2.4 使用NodeList 10.3 小结章节内容详解 10.1.2 Document 类型文档写入 document.wrtie()和document.writeln() 方法都接受一个字符串参数，即要写入到输出流中的文本。write()会原样写入，而writeln()则会在字符串的末尾添加一个换行符(\n)。在页面被加载的过程中，可以使用这两个方法向页面中动态的加入内容。还可以动态引入外部js文件。 <html> <head> <title>title</title> </head> </body> <script> document.write("<script type=\"test/javascript\" src-\"file.js\">"+"</script>");

学习03-js（DOM）

阅读更多关于学习03-js（DOM）

窗口加载事件 window.onload=function(){}或者window.addEventListener("load",function(){}) load //等页面内容全部加载完执行 DOMContentLoaded //是DOM加载完毕就执行比load快窗口大小事件 window.onresize=function(){} //调整窗口大小加载事件，当触发是就调用处理函数 window.addEventListener("resize",function(){}); window.innerWidth //当前屏幕的宽度定时器 setTimeout //window.setTimeout(调用函数，[延迟的毫秒数]); setInterval() //window.setInterval(回调函数，[间隔的毫秒数]);可以一直调用 window.clearTimeout(timeout ID) //停止定时器 window.clearInterval（intervalID） //停止setInt定时器erval（） location对象 history对象来源： oschina 链接： https://my.oschina.net/u/4454049/blog/3178087

BOM，DOM

阅读更多关于 BOM，DOM

一 BOM JavaScript分为 ECMAScript，DOM，BOM BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 1. window对象　　Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。　　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。一些常用的Window方法： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭当前窗口 2. location对象 window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。常用属性和方法：

JavaScript DOM查询

阅读更多关于 JavaScript DOM查询

DOM查询　　- 通过具体的元素节点来查询　　- 元素.getElementsByTagName() 　　- 通过标签名查询当前元素的指定后代元素，返回数组　　- 元素.childNodes 　　- 获取当前元素的所有子节点　　- 会获取到空白的文本子节点　　- 元素.children 　　- 获取当前元素的所有子元素　　- 元素.firstChild 　　- 获取当前元素的第一个子节点　　- 元素.lastChild 　　- 获取当前元素的最后一个子节点　　- 元素.parentNode 　　- 获取当前元素的父元素　　- 元素.previousSibling 　　- 获取当前元素的前一个兄弟节点　　- 元素.nextSibling 　　- 获取当前元素的后一个兄弟节点 innerHTML和innerText 　　- 这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性　　- 两个属性作用类似，都可以获取到标签内部的内容，　　不同是innerHTML会获取到html标签，而innerText会自动去除标签　　- 如果使用这两个属性来设置标签内部的内容时，没有任何区别的常用的查询操作 document.getElementById(“id值”) 返回一个对象 document.getElementsByName(“name属性值”)

HTML DOM Document 对象

阅读更多关于 HTML DOM Document 对象

Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。 write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。来源： https://www.cnblogs.com/ly52990/p/9984065.html

Vue.js

阅读更多关于 Vue.js

框架演变：原生js: jequery类库: 封装了原生js方法，是个库，浏览器兼容性前端模板引擎(): 调用方法生成dom元素(组件，页面等等) 流行框架(vue,react,anjular): 1.减少不必要的dom操作 2.提供双向数据绑定，只需关注业务，不必要关注dom 项目结构： vue项目结构来源： CSDN 作者：小T的博客链接： https://blog.csdn.net/m0_37840243/article/details/104539813

js原生选项卡 Dom部分

阅读更多关于 js原生选项卡 Dom部分

什么是dom ：　　1. DOM ======> Document Object Model 　　2. Dom定义了表示和修改文档所需要的方法。　　Dom对象即为宿主对象，有浏览器厂商定义，　　用来操作html和xml功能的一类对象集合。　　也有人称DOM是对html以及xml的标准编程接口。原生js选项: < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document < / title > < ! -- css部分 -- > < style > * { margin : 0 ; padding : 0 ; } . wrap { padding - top : 20 px ; box - sizing : border - box ; margin : 0 auto ; width : 50 pz ; height : 40 vw ; background : #f00 ; } . wrap div { width : 100 % ; height : 90 % ; margin - top :

JavaScript操作DOM对象

阅读更多关于 JavaScript操作DOM对象

1、访问节点 <!DOCTYPE html> < html> < head lang= "en "> < meta charset= "UTF-8 "> < title>访问节点</ title>  </ head> < body> < ul> < li>大家辛苦了1</ li> < li>大家辛苦了2</ li> < li>大家辛苦了3</ li> </ ul> < img src= "../images/cat.jpg " alt= "这是一只可爱的小猫咪 " id= "cat "> < script type= "text/javascript "> //获取ul中的第一个li var ul = document. getElementsByTagName( "ul ")[ 0]; //输出节点的名称 document. write( "ul节点的名称: " + ul. nodeName + "<br/> "); document. write( "ul节点的类型: " + ul. nodeType + "<br/> "

react系列--基本语法结构

阅读更多关于 react系列--基本语法结构

1.页面引入文件结构大致如下 <!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body> </html> 其中需要注意，书写react语法的 script 标签的 type 属性为 text/babel 。因为要使用jsx语法，关于jsx，大家可以点击 react系列--jsx 面代码一共用了三个库： react.js 、 react-dom.js 和 Browser.js ，它们必须首先加载。其中， react.js 是 React 的核心库， react-dom.js 是提供与 DOM 相关的功能， Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成( babel 模块)。 2.ReactDOM.render

React Native之React速学教程(中)

阅读更多关于 React Native之React速学教程(中)

概述本篇为《React Native之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component）以及组件的属性，状态等方面进行讲解。 What’s React React是一个用于组建用户界面的JavaScript库，让你以更简单的方式来创建交互式用户界面。当数据改变时，React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测，更容易调试。构建封装管理自己的状态的组件，然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的，而不是模板，所以你可以轻松地通过您的应用程序传递丰富的数据，并保持DOM状态。一次学习随处可写，学习React，你不仅可以将它用于Web开发，也可以用于React Native来开发Android和iOS应用。不是模板却比模板更加灵活：心得：上图是 GitHub Popular 的首页截图，这个页面是通过不同的组件组装而成的，组件化的开发模式，使得代码在更大程度上的到复用，而且组件之间对的组装很灵活。 Get Started 使用React之前需要在页面引入如下js库。 react.js react-dom.js browser.min.js 上面一共列举了三个库： react.js 、react-dom.js 和 browser.min.js

订阅 dom