天道酬勤,学无止境

DOM 节点类型概述

转载自:http://www.cnblogs.com/zhaowy/

一般节点至少拥有 nodeType nodeName 和 nodeValue 这三个基本属性。节点类型不同,这三个属性的值也不相同。

NodeType

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值,12种类型分别对应1到12的常数值。

元素节点              Node.ELEMENT_NODE(1)
属性节点              Node.ATTRIBUTE_NODE(2)
文本节点              Node.TEXT_NODE(3)
CDATA节点             Node.CDATA_SECTION_NODE(4)
实体引用名称节点       Node.ENTRY_REFERENCE_NODE(5)
实体名称节点          Node.ENTITY_NODE(6)
处理指令节点          Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点              Node.COMMENT_NODE(8)
文档节点              Node.DOCUMENT_NODE(9)
文档类型节点          Node.DOCUMENT_TYPE_NODE(10)
文档片段节点          Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点            Node.NOTATION_NODE(12)

NodeName

返回节点名称

NodeValue

返回或设置当前节点的值,格式为字符串

  • 元素节点
    元素节点 element 对应网页的 HTML 标签元素。元素节点的节点类型 nodeType 值是1,节点名称 nodeName 值是大写的标签名,nodeValue 值是 null
    // 1 'BODY' null
    console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
    console.log(Node.ELEMENT_NODE === 1);//true
  • 特性节点
    元素特性节点 attribute 对应网页中HTML标签的属性,它只存在于元素的 attributes 属性中,并不是DOM文档树的一部分。特性节点的节点类型 nodeType 值是2,节点名称 nodeName 值是属性名,nodeValue 值是属性值
    <div id="test"></div>
    <script>
    var attr = test.attributes.id;
    //2 'id' 'test'
    console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
    console.log(Node.ATTRIBUTE_NODE === 2);//true    
    </script>
  • 文本节点
    文本节点text代表网页中的HTML标签内容。文本节点的节点类型 nodeType 值是3,节点名称 nodeName 值是'#text',nodeValue 值是标签内容值
    <div id="test">测试</div>
    <script>
    var txt = test.firstChild;
    //3 '#text' '测试'
    console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
    console.log(Node.TEXT_NODE === 3);//true    
    </script>
  • CDATA节点
    CDATASection 类型只针对基于 XML 的文档,只出现在 XML 文档中,表示的是 CDATA 区域,格式一般为
    <![CDATA[
    ]]>

    该类型节点的节点类型 nodeType 的值为4,节点名称nodeName的值为 '#cdata-section',nodevalue 的值是 CDATA 区域中的内容

  • 实体引用名称节点
    实体引用名称节点entry_reference的节点类型nodeType的值为5,节点名称nodeName的值为实体引用的名称,nodeValue的值为null

    //实体名称引用
    <pubinfo>Published by &publisher;</pubinfo>

     

  • 处理指令节点
    处理指令节点ProcessingInstruction的节点类型nodeType的值为7,节点名称nodeName的值为target,nodeValue的值为entire content excluding the target
  • 注释节点
    注释节点comment表示网页中的HTML注释。注释节点的节点类型nodeType的值为8,节点名称nodeName的值为'#comment',nodeValue的值为注释的内容
    <div id="myDiv"><!-- 我是注释内容 --></div>
    <script>
    var com = myDiv.firstChild;
    //8 '#comment' '我是注释内容'
    console.log(com.nodeType,com.nodeName,com.nodeValue)
    console.log(Node.COMMENT_NODE === 8);//true    
    </script>
  • 文档节点
    文档节点document表示HTML文档,也称为根节点,指向document对象。文档节点的节点类型nodeType的值为9,节点名称nodeName的值为'#document',nodeValue的值为null
    <script>
    //9 "#document" null
    console.log(document.nodeType,document.nodeName,document.nodeValue)
    console.log(Node.DOCUMENT_NODE === 9);//true    
    </script>
  • 文档类型节点
    文档类型节点DocumentType包含着与文档的doctype有关的所有信息。文档类型节点的节点类型nodeType的值为10,节点名称nodeName的值为doctype的名称,nodeValue的值为null
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <script>
    var nodeDocumentType = document.firstChild;
    //10 "html" null
    console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
    console.log(Node.DOCUMENT_TYPE_NODE === 10);
    </script>
    </body>
    </html>
  • 文档片段节点
    文档片段节点DocumentFragment在文档中没有对应的标记,是一种轻量级的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。该节点的节点类型nodeType的值为11,节点名称nodeName的值为'#document-fragment',nodeValue的值为null
    <script>
    var nodeDocumentFragment = document.createDocumentFragment();    
    //11 "#document-fragment" null
    console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
    console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
    </script>
  • DTD声明节点
    DTD声明节点notation代表DTD中声明的符号。该节点的节点类型nodeType的值为12,节点名称nodeName的值为符号名称,nodeValue的值为null

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 094.JAVA拓展_DOM4J的概述
    1. DOM4J 的概述 1.1. DOM4J 的导入1.2. DOM4J 中的 API 接口1.3. DOM4J 中常用的 API1.4. DOM4J 中的 Element 类常用方法1.5. DOM4J 操作实例 博主的 Github 地址 1. DOM4J 的概述 DOM4J 是一个 java 的 XML API, 是 JDOM 的升级品, 用来更便捷地读取 XML 文件. 1.1. DOM4J 的导入 开发引入: 把 dom4j.jar 添加到项目的 lib 目录中,并 [build path]. 使用方式: 阅读 dom4j/docs/index.html --> 导航栏选择 [Quick start] --> guide.html 注意: 使用 DOM4J, 使用到的所有的接口/类(Document, Element),全部来源于 org.dom4j 包.使用 DOM4J, 只能一层一层的往下找. 1.2. DOM4J 中的 API 接口 1.3. DOM4J 中常用的 API org.dom4j.io.SAXReader 类 read() 方法: 提供多种读取xml文件的方式,返回一个Domcument对象 org.dom4j.Document 类 iterator() 方法: 使用此法获取nodegetRootElement() 方法: 获取根节点 org
  • React事件机制原理
    原文链接: https://www.cnblogs.com/forcheng/p/13187388.html目录序言DOM事件流事件捕获阶段、处于目标阶段、事件冒泡阶段addEventListener 方法React 事件概述事件注册document 上注册回调函数存储事件分发小结参考1.序言React 有一套自己的事件系统,其事件叫做合成事件。为什么 React 要自定义一套事件系统?React 事件是如何注册和触发的?React 事件与原生 DOM 事件有什么区别?带着这些问题,让我们一起来探究 React 事件机制的原理。为了便于理解,此篇分析将尽可能用图解代替贴 React 源代码进行解析。2.DOM事件流首先,在正式讲解 React 事件之前,有必要了解一下 DOM 事件流,其包含三个流程:事件捕获阶段、处于目标阶段和事件冒泡阶段。W3C协会早在1988年就开始了DOM标准的制定,W3C DOM标准可以分为 DOM1、DOM2、DOM3 三个版本。从 DOM2 开始,DOM 的事件传播分三个阶段进行:事件捕获阶段、处于目标阶段和事件冒泡阶段。(1)事件捕获阶段、处于目标阶段和事件冒泡阶段示例代码:<html> <body> <div id="outer"> <p id="inner">Click me!</p> </div> </body> </html>上述代码
  • Web APIs基础
    Web APIs基础 1. Web APIs 和 JS 基础关联性1.1 JS的组成 2. API 和 Web API2.1 API2.2 Web API 3. DOM3.1 DOM简介3.1.1 什么是DOM3.1.2 DOM树 3.2 获取元素3.2.1 如何获取页面元素3.2.2 根据 ID 获取3.2.3 根据标签名获取3.2.4 通过 HTML5 新增的方法获取3.2.5 获取特殊元素(body、html) 3.3 事件基础3.3.1 事件概述3.3.2 事件三要素3.3.3 常见的鼠标事件 3.4 操作元素3.4.1 改变元素内容3.4.2 常用元素的属性操作3.4.3 表单元素的属性操作3.4.4 样式属性操作3.4.5 排他思想3.4.6 自定义属性的操作3.4.7 H5自定义属性 3.5 节点操作3.5.1 节点操作3.5.2 节点概述3.5.3 节点层级3.5.4 创建节点3.5.5 添加节点 1. Web APIs 和 JS 基础关联性 1.1 JS的组成 2. API 和 Web API 2.1 API API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某些软件或硬件得以访问一组例程的能力,或理解内部工作机制的细节。 简单理解:API是给程序员提供的一种工具
  • JavaScript 小白手册
    JavaScript 文章目录 JavaScript1. 变量2. 数据类型2.1 基本类型2.2 引用类型2.3 类型转换2.4 判断数据类型 3. 特殊的关系运算符4. 数组声明5. 对象声明6. 内置对象6.1 String6.2 Array6.3 Math6.4 Date6.5 Global 7. BOM7.1 window7.2 history7.3 location7.4 navigator7.5 screen 8. DOM8.1 Document8.2 Element8.2.1 属性操作8.2.2 元素内容8.2.3 节点操作js操作form表单js操作form表单 1. 变量 在函数中声明 // 都为局部变量 function fun() { var a, b, c = 1; } // 则除了第一个为局部,其它则全局 function fun() { var a = b = c = 20; } // 都是全局变量 function fun() { a = 1, b = 1; } 在函数外声明 var a = 1; //全局变量 结构赋值 var [a,b,c] = [1,2,3]; 2. 数据类型 2.1 基本类型 基本类型说明Number数字类型String字符串类型Booleantrue与falseNull空对象赋值
  • js-DOM节点操作
    一、节点概述 1、定义 DOM :文档对象模型 DMO是针对HTML文档的一个API(应用程序编程接口),DOM描绘了一个层次化的节点树,允许开发人员添加,删除,修改页面的某一部分。 2、节点分为几种不同的类型 : Node类型Document类型Element类型Text类型——文本类型Comment类型 —— 注释类型 二、节点层级 利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。 1、父级节点 语法: node.parentNode parentNode属性可返回某节点的父节点,注意是最近的一个父节点 如果指定的节点没有父节点则返回null 实例: <div class="demo"> <div class="box"> <span class="c1">×</span> </div> </div> <script> // 1. 父节点 parentNode var c1 = document.querySelector('.c1'); // var box = document.querySelector('.box'); // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null console.log(c1.parentNode); </script> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
  • JavaScript 一个可以 “游戏” 的语言
    前言学会这个语言,可以让你写出“有意思”的代码。为什么学习JavaScript?. HTML 定义了网页的内容 . CSS 描述了网页的布局 . JavaScript 网页的行为JavaScript概述. JavaScript 还是一们基于对象和时间驱动的脚本语言,它主应用于客户端。 . JavaScript 是 Web 的编程语言。 . 所有现代的 HTML 页面都使用 JavaScript。1.特点 . 解释运行,不需要编译 . 基于对象 . 弱类型2.优点 . 交互性 . 安全性 . 跨平台–基于浏览器JavaScript 与 HTML ?1.直接在html中书写js代码 通过<script type="text/javascript"></script>标签, 在这个标签的内部可以书写js代码2.引入外部的js文件 通过<script type="text/javascript" src="demo1.js"></script> 来引入外部的js文件 注意: 这个标签不能够合并成自闭标签, 否则会引入失败.JavaScript 格式关键字. JavaScript的内容是在HTML 中的 head 中定义的。script 标签 <script> JavaScript </script> : 正如我之前所述,JavaScript 的内容定义在 HTML 的 head 中,而在
  • 深入浅出vue.js----模板编译原理
    一、概述 (1)在Vue.js中创建HTML并不是只有模板这一种途径。既可以手动写渲染函数来创建HTML,也可以在Vue.js中使用JSX来创建HTML。 (2)渲染函数是创建HTML最原始的方法。 (3)模板最终会通过编译转换成渲染函数,渲染函数执行后,会得到一份vnode用于虚拟DOM渲染。所以模板编译其实是配合虚拟DOM进行渲染。 (4)模板编译所介绍的内容是如何让虚拟DOM拿到vnode。(模板--》模板编译--》渲染函数(模板编译)--》vnode--》用户界面(虚拟DOM)) (5)Vue.js提供了模板语法,允许声明式地描述状态和DOM之间地绑定关系,然后通过模板来生成真实DOM并将其呈现在用户界面上。 (6)在底层实现上,Vue.js会将模板编译成虚拟DOM渲染函数。当应用内部地状态发生变化时,Vue.js可以结合响应式系统,聪明地找出最小数量地组件进行重新渲染以及最少量地进行DOM操作。 二、概念 (1)平时使用模板时,可以在模板中使用一些变量来填充模板,还可以在模板中使用Javascript表达式,又或者是使用一些指令等。这些功能在HTML语法中是不存在的,这多亏了模板编译赋予了模板强大的功能。 (2)模板编译的主要目标就是生成渲染函数。而渲染函数的作用是每次执行它,它就会使用当前最新的状态生成一份新的vnode,然后使用这个vnode进行渲染。 三
  • web三件套之HTML——Web概述(一)
    文章目录 web三件套之HTML(一)Web前端开发技术综述1.1 Web概述1.2 Web的特点1.3 Web工作原理1.4 Web前端开发1.5 Web前端开发技术1.5.1 Web开发标准三剑客之HTML1.5.2 Web开发标准三剑客之CSS(级联样式表)1.5.3 Web开发标准三剑客之JavaScript1.5.4 HTML DOM1.5.5 BOM1.5.6 AJAX1.5.7 jQuery 1.6 习题和实验 web三件套之HTML(一) Web前端开发技术综述 1.1 Web概述 起源 1980年Tim Berners (蒂姆-伯纳斯-李)在欧洲核子物理实验室构建了一个项目——ENQUIRE。这是一个类似于维基百科的超文本在线编辑数据库。1989年3月,他编写了一篇文章,里面提到了一个更加精巧的管理模型——万维网。1990年与RobertCailliau合作。1990年11月13日在一台NeXT工作站写了第一个网页以实现他的想法。后来这台NeXT工作站成为了世界上第一台互联网服务器。同年圣诞节假期,其设计了一套开展网络工作所需的所有工具:第一个万维网浏览器(也是编辑器)和第一个web服务器。 1991年8月6日在alt.hypertext新闻组正式发布关于万维网的文章。标志着因特网上万维网公共服务的首次亮相。 Tim
  • 【收藏】JavaScript DOM操作简易速查手册
    1 概述 1.1 前言 本文中简要罗列了JavaScript操作Dom的基本方法,其中包括元素查询、文档结构遍历、属性及内容操作、创建节点、插入节点及删除节点等内容。虽然JQuery更便利,但我还是喜欢用原生的API。 2 文档元素选取 2.1 ID选择器 通过ID选取元素是最简单和常用的选取元素的方法,ID选择器性能优于其它选择器。 var title = document.getElementById("title"); ID不存在,返回 null 。 查看示例程序 2.2 名称选择器 基于name属性的值选取元素区别于ID选择器。其一,name属性值 不是必须唯一,多个元素可能有同样的名称;其二,name属性只在少数HTML元素中有效,包括表单、表单元素、iframe 及 img 元素。 var sports = document.getElementsByName("sports"); 查看示例程序 2.3 标签选择器 利用HTML元素的标签名称选取指定类型的元素。 var h1 = document.getElementsByTagName("h1"); 查看示例程序 2.4 类选择器 通过HTML的 class 属性值选择元素。 var title = document.getElementsByClassName("title"); 查看示例程序 2.5
  • 事件委托
    js委托事件的概述与作用 addEventListener直接绑定新的元素会报dom不存在的错误吗?肯定是会的 事件委托(代理):未来还不清楚会创建多少个节点,所以没办法实现给他们注册事件 先把事件委托的作用写一下。 1.支持为同一个DOM元素注册多个同类型事件 2.可将事件分成事件捕获和事件冒泡机制 问题:一般的注册事件,后面的会覆盖前面的(addEventListener(type,listener,useCapture)可以避免这种情况 type: 必须,String类型,事件类型(去掉on) listener: 必须,函数体或者JS方法 useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段 事件捕获和事件冒泡机制 1.事件捕获 当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件 2、事件冒泡 当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件 事件委托和新增节点绑定事件的关系? 事件委托的优点: 1.提高性能:每一个函数都会占用内存空间,只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。 2.动态监听:使用事件委托可以自动绑定动态添加的元素
  • JS DOM知识总结 全!!
    1 DOM 介绍 **MDN 文档对象模型手册:**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model 1)DOM 英文全称“Document Object Model”,译为“文档对象模型”。 2)DOM 是一个与平台和编程语言无关的接口,通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。 2 Node 节点 2.1 五大节点类型 document 文档节点 nodeType:9 element 元素节点 nodeType:1 nodeName 获取元素的标签名 attribute 属性节点 nodeType:2 text 文本节点 nodeType:3 comment 注释节点 nodeType:8 2.2 节点的属性 nodeName 获取节点的名字 nodeValue 获取节点的值 nodeType 获取节点的类型,用数字表示 3 获取元素 ① 通过 ID 名 document.getElementById('ID名'); 总结: 方法返回一个元素对象。如果没有满足条件的元素返回 null。 ② 通过标签名 // 从文档中获取 document.getElementsByTagName('标签名'); // 从元素的后代中获取 element
  • DOM知识点整合
    DOM操作 1.DOM树 文档:一个页面就是一个文档,DOM中使用document表示元素:页面中的所有标签都是元素,DOM中使用element表示节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示 2.获取元素 1. 根据ID获取 document.getElementById('id'); 2. 根据标签名获取 getElementsByTagName('标签名'); 注意: 1.得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。 2.得到元素对象是动态的。 3.如果获取不到元素,则返回为空的伪数组(因为获取不到对象) 3. 通过HTML5新增的方法获取 document.querySelector('选择器'); document.querySelector('.class名'); document.querySelector('#ID名'); document.quesrSelectorAll('选择器');//获取所有指定元素 document.getElementsByClassName('类名'); 4. 特殊元素获取 //获取body元素 document.body //返回body元素对象 //获取html元素 document.documentElement //返回html元素对象 3.事件 4.操作元素 1
  • Web APIs(一)|Web APIs简介+DOM
    一.Web APIs简介 01.Web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 02. API和Web API 2.1 API 2.2 Web API 2.3 API和Web API总结 二. DOM 01. DOM简介 1.1什么是DOM 1.2 DOM树 02.获取元素 2.1如何获取元素 2.2根据ID获取 2.3根据标签名获取 2.4通过HTML5新增的方法获取 2.5获取特殊元素(body,html) 03.事件基础 3.1事件概述 3.2事件三要素 3.3执行事件的步骤 3.4常见的鼠标事件 3.5分析事件三要素 04.操作元素 4.1改变元素内容 4.2常用元素的属性操作 4.3表单元素的属性操作 4.4样式属性操作 4.5排他思想 4.6自定义属性的操作 4.7 H5自定义属性 05.节点操作 5.1为什么学节点操作 5.2节点概述 5.3节点层级 5.4创建节点 5.5添加节点 5.6删除节点 5.7复制节点(克隆节点) 5.8三种动态创建元素区别 06. DOM重点核心 6.1创建 6.2增 6.3删 6.4改 6.5查 6.6属性操作 6.7事件操作 来源:https://blog.csdn.net/Better_Xing/article/details/104990096
  • B站 - 狂神说 - JavaScript 随堂笔记(图)
    文章目录 1、什么是 JavaScript1.1、概述 2、快速入门2.1、引入JavaSciprt2.2、基本语法入门2.3、数据类型2.4、严格检查格式 3、数据类型详解3.1、字符串3.2、数组3.3、对象3.4、流程控制3.5、map和set3.6、iterator 4、函数4.1、定义函数4.2、变量的作用域4.3、方法5、内部对象5.1、基本语法5.2、JSON5.3、Ajax 6、面向对象编程7、操作BOM对象(重点)8、操作DOM对象(重点)9、操作表单(验证)10、jQuery> 小技巧 1、什么是 JavaScript 1.1、概述 JavaScript是一门世界上最流行的脚本语言 Java、 JavaScript 10天— 一个合格的后端人员,必须要精通 JavaScript ### 1.2、历史 JavaScript的起源故事 https://blog.csdn.net/kese7952/article/details/79357868 ECMAScript它可以理解为是Javascript的一个标准 最新版本已经到es6版本- 但是大部分浏览器还只停留在支持es5代码上! 开发环境一线上环境,版本不一致 2、快速入门 2.1、引入JavaSciprt 1、 内部标签 <script> //... </script> 2、外部引入 abs.js //
  • 15-JavaSE【方法引用、Base64、XML,Dom4j】
    文章目录 回顾反射+注解一、JDK新特性1、方法引用2、Base64编码**Base64 编码介绍**Base64内嵌类和方法描述 二、 XML概述1、XML作用2、XML的组成3、 XML约束DTD约束Schema约束 4、名称空间 三、Dom4j解析1、XML解析2、 解析方式和解析器3、 Dom4j的基本使用4、Dom4j 常用的方法SAXReader对象Document对象Element对象 5、代码演示 四、XPath解析1、XPath解析基本概述2、XPath解析XML案例XPath绝对路径XPath相对路径表达式XPath全文搜索路径表达式谓语(条件筛选)方式 回顾反射+注解 案例:使用反射+注解技术,完成以下需求 Map集合: Map<String,String> 存储数据: ["stuName"="张三", "stuAge"="22", "stuScore"="88"] 需求:把Map集合中的数据,利用反射+注解,给Student类中的私有属性赋值 Student类 @StuAnnotation(source = "data1") public class Student { @StuAnnotation(value="stuName",type = DataTypeEnum.String) private String name; @StuAnnotation
  • JavaScript编程规范、性能与DOM
    目录 JavaScript 样式指南和代码约定 JavaScript 代码约定 变量名 运算符周围的空格 实例 代码缩进 函数 语句规则 实例 函数: 循环: 条件: 对象规则 实例 行长度小于 80 实例 命名约定 HTML 和 CSS 中的连字符: 下划线: 帕斯卡命名法(PascalCase): 驼峰大小写(camelCase): 在 HTML 中加载 JavaScript 访问 HTML 元素 文件扩展名 使用小写文件名 性能 JavaScript 最佳实践 避免全局变量 始终声明局部变量 在顶部声明 初始化变量 请不要声明数值、字符串或布尔对象 请勿使用 new Object() 使用 Parameter Defaults 用 default 来结束 switch JavaScript 性能 减少循环中的活动 减少 DOM 访问 缩减 DOM 规模 避免不必要的变量 延迟 JavaScript 加载 实例 避免使用 with DOM概述 什么是 DOM? DOM 和 JavaScript 如何访问 DOM? 重要的数据类型 DOM 接口 接口及对象 DOM中核心接口 JavaScript 样式指南和代码约定 JS 调试JS 最佳实践 请始终为您所有的 JavaScript 项目使用相同的代码约定。 JavaScript 代码约定 代码约定(Coding
  • JavaScript小白入门1
    编程语言和计算机基础 编程语言 编程 计算机语言 编程语言 翻译器 编程语言和标记语言区别 编程语言有很强的逻辑和行为。在编程语言里,会有很多的if else、for、while等具有逻辑性和行为能力的指令,是主动的。标记语言(HTML)不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的,是被动的。 总结: 计算机基础 计算机组成 硬件、软件 数据存储 数据存储单位 程序运行 初识JavaScript JavaScript 历史 发明者:布兰登·艾奇他在1995年利用10天完成JavaScript的设计网景公司最初命名为LiveScript,后来在与Sun公司合作之后将其改名为JavaScript JavaScript 是什么 JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行,不需要上传到远程服务器现在也可以基于Node.js技术进行服务器端编程 JavaScript 的作用 HTML/CSS/JS 的关系 浏览器执行JS简介 浏览器分成两部分:渲染引擎和JS引擎 渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkitJS引擎:也称为JS解释器,用来读取网页中的JavaScript代码
  • js总结
    JavaScript学习总结 Js的概述 ​ JavaScript简称js,是一种直译式、弱类型的、基于事件驱动的语言。它的解释器(js引擎)属于浏览器的一部分,因此js是一种广泛用于客户端的脚本语言 强类型与弱类型的区别 强类型语言-java:java中的任何变量在使用前都必须声明其数据类型,而且变量一旦确定类型就无法更改。弱类型语言-js:由于没有编译的过程,js中的所有变量类型都是在运行期间动态确定的,而且可以随时修改其数据类型。 java是一门服务端语言(有编译过程,运行速度更快,支持多线程环境),js是一门客户端语言(无需编译,单线程) Js的组成 EXMAScript核心语法:提供核心语言功能浏览器对象模型(BOM):提供与浏览器交互的方法和接口文档对象模型(DOM):提供访问和操作网页内容的方法和接口 Js的基础语法 常见的引入方式 直接在html页面中使用内联的script标签内编写引入外部脚本文件(js文件)直接在html元素中用内嵌的方式使用 标签中href和src的区别 href关联的资源会与页面同步加载src关联的资源是执行时,浏览器停止对页面的渲染,先读取src关联的资源,再将资源替换到该位置 Js的数据类型 虽然js是一门弱类型语言,但它也支持很多不同类型的数据,不同类型之间也有不同区别 数值类型(包含浮点)number字符类型(包含字符串和字¬
  • DOM笔记
    DOM 1. DOM 简介1.1 什么是 DOM1.2 DOM 树 2. 获取元素2.1 如何获取页面元素1. 根据 ID 获取2. 根据标签名获取3. 通过 HTML5 新增的方法获取4. 特殊元素获取 3. 事件基础3.1 事件概述3.2 事件三要素3.3 执行事件的步骤常见的鼠标事件 4. 操作元素4.1 改变元素内容4.2 常用元素的属性操作4.4 样式属性操作作业1: 用户名 显示隐藏内容作业2:下拉菜单作业3:开关灯4.5 排他思想案例:按钮练习案例:表单全选取消全选案例4.6 自定义属性的操作案例:tab 栏切换(重点案例)4.7 H5自定义属性 5. 节点操作5.1 为什么学节点操作5.2 节点概述5.3 节点层级1. 父级节点2. 子节点3. 兄弟节点 5.4 创建节点留言案例 5.5 删除节点删除节点案例 5.6 复制节点(克隆节点)5.8 三种动态创建元素区别 6.dom操作6.4 改6.5 查6.6 属性操作6.7 事件操作1.注册事件1.2 addEventListener 事件监听方式1.3 attachEvent 事件监听方式1.4 注册事件兼容性解决方案 2.删除事件(解绑事件)2.1 删除事件的方式2.2 删除事件兼容性解决方案 3. DOM 事件流4. 事件对象4.1 什么是事件对象4.2 事件对象的使用语法4.3 事件对象的兼容性方案4.4
  • Java系统学习,最全路线。全面系统学习Java
    第一阶段 JavaSE Java编程语言概述Java基础语法Java数组计算机语言介绍流程控制语句的介绍static 修饰符Java语言的前世今生Java 编译器执行流程通类的成员之代码块Java技术体系平台if 分支结构静态代码块与非静态代码块Java核心机制与JVM运行原理switch 选择结构与相关规则单例 (Singleton) 设计模式搭建 Java开发环境循环结构final 修饰符JDK 的安装与配置for 循环包 (package) 的管理与作用开发第一个Java 应用程序while 循环DOS 命令行下编译器操作Java Code Styleswitch 选择结构与相关规则使用 jar 命令打包应用程序变量的声明与使用do-while 循环语句数组的创建与使用变量内存空间分配与原理各语句性能对比与应用场景数组的默认初始化与内存分析进制与位运算特殊流程控制语句数组的常见算法分析变量的数据类型方法的声明与使用操作数组的工具类 Arrays数据类型之间的转换方法调用的过程分析命令行参数变量的运算与底层运算原理跨类调用方法可变参数参数的值传递方法的重载 Overload 面向对象编程高级类特性Java API面向对象和面向过程的理解抽象类 (abstract) 实际应用举例Wrapper 包装类类和对象的理解接口(interface)