web前端学习笔记(一)（《JavaScript DOM编程艺术》（From 2018.11.19））_jsdom练习读取booksxml文件的节点内容以表格方式对内容进行展示通过下拉-优快云博客

本文链接：https://blog.youkuaiyun.com/TTKKGNN/article/details/84475142

本文从初学者的角度介绍了前端开发的基本概念，包括HTML、CSS、JavaScript的基础知识，DOM操作，以及如何使用JavaScript提升网页的交互性。文章还探讨了CSS的强大功能，如继承，以及如何通过DOM方法动态创建和修改网页内容。

2018.11.19：

DOM：对文档的内容进行抽象和概念化的方法。

HTML：超文本标记语言

CSS：层叠样式表

DOM给文档增加交互能力

JavaScript（NetScape、Sun公司创建，起初最开始叫LiveScript）使网页具备交互能力的程序设计语言。W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口......”

PS:第一天学习没有什么实质性的进展...只是丰富了下前端的概念和非常简单的历史。

2018.11.20：

1、最好把<script>标签放在HTML文档的最后，</body>结束之前。（能更快地加载页面）

2、程序设计语言分为：解释性（需要解释器---一般浏览器自带解释组件）、编译型（编译器）

3、JS允许程序员直接对变量赋值而无需声明（自动声明未声明的变量）

4、效率更高的声明变量：var mood=“happy”,age=33;(注：可同时声明不同类型的多个变量)

5、命名规则---驼峰格式：myMood

6、必须明确类型所声明的语言为“强类型语言”；因此JS是弱类型语言，可以在任意时刻改变数据类型

7、反斜杠--->转义字符 eg:var mood= 'don\'t ask!'; var height="about 5'\" tall";

8、注：不管选择双引号还是单引号，整个脚本需要保持一致，代码易读性、整洁性等

9、数组*(5种声明形式)：var beatles =Array(); Array(4); Array("1","2","3","4"); ['1','2','3','4',]; ["Test",123,false];(同一数组中可以包含多种数据类型；数组中的其中一个元素可以是另外一个数组)

2018.11.22：

1、Object对象：

（1）对象的每个值都是对象的一个属性：

var lennon = object();

lennon.name = "John";

lennon.year= 1940;

lennon.isleaving = false;

(2) var lennon = {name="John",year=1940,isleaving=false};

注：数组可以用对象来简化那么多数字来获取想要的元素。

2、操作符：（1）算数操作符 + - * / (2)变量可以包含操作： var total = （1+4）*5；

3、比较操作符：

注：var a = false, b = "";

if( a == b ){...}

此条件反返回为true！！！因为：“相等操作符”认为空字符串与false含义相同；因此需要用全等和全不等：“===”、“!==”,不仅可以比较值，还会比较变量。

4、循环语句

（1）while循环

（2）do while循环：希望在循环语句之前至少执行一次

（3）for循环

5、函数

6、变量的作用域

7、对象可以包含属性和方法：object.property object.method()

8、宿主对象：由它运行环境提供的 eg：Form、Image、Element等、document对象

2018.11.23：

5个常用的DOM方法：getElementById、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute。

一、CSS：继承是CSS技术中的一项强大功能。

eg：body{

color：white；

background-color：black；

}

这些颜色不仅作用于那些直接包含在<body>中的内容，还将作用于嵌套在<body>元素内部所有元素，

1、class属性：

.special{....} h2.special{....} //特定类型的特定样式

2、id属性：

eg:#purchase{...} <ul id="purchase"/> #purchase.li{...}//利用id属性为包含在该特定元素里的其他元素定义样式

二、获取元素（3种DOM方式）-----区分大小写

1、getElementById（返回的即是一个object）

eg：document.getElementById("purchase")

2、getElementsByTagName：用不着每一个元素都定义唯一的id值使用第一种方式，可通过这种方式获取没有id属性的对象，返回的是一个对象数组。

eg：document.getElementsByTagName("li").length//查出这个数组的个数

object.getElementsByTagName("*")//该对象中的所有元素清单，依然是对象数组

3、getElementsByClassName

eg:getElementsByClassName("A1 A2")//较新的浏览器支持，带有多个类名，中间用空格分隔

三、获取和设置属性

1、getAttribute（“attributename”）

2、setAttribute：可完成两项操作----（1）先创建这个属性（2）设置该值

注：属性值的改变不反映在文档中本身的代码中，这中现象来源自DOM的工作模式：先加载静态的，在动态刷新，动态刷新不会影响文档中的静态内容。对页面内容进行刷新却不需要在浏览器刷新页面。

2018.11.25：

第四章：案例研究

“第一级DOM”（可适用于任何一种标记语言）能够让你避免与兼容性有关的任何问题。（可移植性好）

注：“return false;” 意思即是没有被点击（避免既触发脚本方法，浏览器又跳转至链接）

1、childNodes属性：获取任何一个元素的所有子元素（文档中几乎每个东西都是节点，其中包括元素节点、属性节点、文本节点等等）的数组

eg：element.childNodes

2、nodeType属性：（共12中可取值--------1：元素节点；2：属性节点；3：文本节点）

eg：node.nodeType

3、nodeValue属性

eg：<p id="test">test info</p> 注：(1)test.childNodes[0].nodeValue (2)test.nodeValue----返回为null（错误），因为<p>本身的nodeValue就是一个空值，其下的第一个子节点即是元素中的文本（文本也是一个节点）

4、firstChild和lastChild属性：

node.firstChild ----等价于----node.childNodes[0]

node.lastChild ----等价于----node.childNodes[node.childNodes.length-1]

第五章：最佳实践（1、平稳退化2、分离JavaScript3、向后兼容性4、性能考虑）

如果用户的浏览器禁用、不支持JavaScript该怎么办？

一、平稳退化：虽然某些功能无法使用，但最基本的操作仍能顺利完成！

1、window.open(url,name,feature);//三个参数都是可选的

eg:window.open(windowurl,"test","width=300,height=400;");

2、“javascript:”伪协议：通过一个链接来调用JavaScript函数-----该做法非常不好

eg：<a href="javascript:showPic();" >Example</a>

注：（1）这句话在支持伪协议的浏览器中运行正常（2）较老的浏览器则会尝试，但是打开失败（3）支持该伪协议但禁用JS的什么也不会做

3、<a href="#" onClick=“showPic();return false；”>Example</a>

注：与用伪协议一样糟糕，“#”未指向任何目标的内部链接，实际工作由onClick属性负责完成；因为用户禁用JS功能，这样的链接将毫无左右，“#”在某些浏览器中指向当前文档的开头

4、<a href="http://........" onClick=“showPic();return false；”>Example</a>

注：即使JS禁用，链接也是可用的，这没有彻底失败，这是一个经典的“平稳退化”的例子

二、向CSS学习（最大的优点：可以将web文档内容结构（标记）和版面设计（样式）分离开来）

三、向右兼容

1、对象检测：

eg：if（!document.getElementById） return false;//getElementById没有括号，用户检测用户浏览器是否支持这个方法

注：这么做事为了让脚本有良好的向右兼容性

2、浏览器嗅探技术：通过浏览器供应商提供的信息（品牌、版本号）来解决向后兼容问题

注：风险较大！

四、性能考虑：

1、尽量少访问DOM和尽量减少标记（一定方面上减少查找特定元素的时间）

2、合并和放置脚本

（1）合并到一个脚本文件中（减少加载页面发送请求的时间）

（2）放在</body>之前

（3）压缩脚本（如空格、注释等统统删除）注：在多数情况下，会留有两个版本（工作、精简---放在站点上）eg：test.min.js

2018.11.25:

第六章：把事件处理函数移除文档（JS不再依赖HTML文档的结构和内容），向后兼容，确保可访问

一、JavaScript与HTML标记应该分离

1、花括号：最清晰，最具可读性的代码书写

2、结构化程序设计备忘：函数应该只有一个入口、一个出口，但若有多个出口（return....)，只要这些几种出现在函数的开头部分还是可以接受的。

3、改变行为：

eg:匿名函数：links[i].onclick = function(){

...

}

4、在HTML文档完成加载之前DOM是不完整的

5、不要做太多的假设：if else...

6、DOM Core：obj.getAttribute("src")

HTM Core：obj.src

2018.11.28:

第七章：动态创建标记

一、传统方法：

1、document.write

注：用该方法，实乃JS与HTML混用，不易阅读和编程

2、innerHTML：是HTML专有属性，不能用于任何其他标记语言文档

二、DOM方法：

1、createElement方法：（创建元素节点）

eg：document.createElement(nodeName);-----"p"

2、appendChild方法：（将节点插入父节点）

eg：parent.appendChild(child);

3、createTextNode方法：增加节点的文本节点

eg：var txt=document.createTextNode("Hello World!");

parent.appendChild(txt);

三、优化图片库：

1、在已有元素前插入一个新元素：

parentElement.insertBefore(newElement , targetElement)

eg:var gallery=document.getElement("imageGallery");

gallery.parentNode.insertBefore(placeholder,gallery);

2、在现有元素后插入一个新元素

注：DOM并没有提供

3、nextSibing：目标元素的下一个兄弟

4、Ajax：用于概括异步加载页面内容的技术，实现只更新页面中的一小部分（标志、导航、头部、脚部都不用重新加载）

XMLHttpRequest对象是Ajax技术的核心

2018.12.6:

第八章：充实文档中的内容

一、不应该做什么？

两项原则：1、渐进增强 2、平稳退化：利用DOM去生成内容有着广泛用途

注：CSS改进呈现样式，DOM添加各种行为

二、把不可见变成可见：

<abbr>：缩略语标签

三、内容

1、选用HTML、XHTML、HTML5

不管选用哪个，必须与选用<!DOCTYPE>声明一致

HTML：（1）标签可大、小写（2）可不闭合

XHTML：（1）只能小写（2）必须闭合

注：为了与早期的浏览器保持兼容，应该在反斜杠字符的前面保留一个空格

html

HTML5：文档类型声明较简单---------eg：<!DOCTYPE Html>

2、CSS：

每个浏览器都有一些自己的默认样式，可自己编写样式表来取代默认样式

3、JavaScript：

可以用DOM去改变浏览器的默认行为

四、显示“缩略语列表”：

1、一个浏览器“地雷”：

若使用的浏览器是IE6或者更早的windows版本会报错，因为<abbr>元素在这些版本不被承认

五、文献来源链接表：

注：有些浏览器会把换行符解释为一个文本节点，若没有百分百把握，就一定要去检查nodeType属性值。

六、显示快捷键清单：

1、accesskey属性：关联元素与键盘上的特定按键

总结：

(1)本章主要示例：用JS函数先把文档结构里的一些现有信息提取出来，再把这些信息以一种清晰和有意义的方式重新插入到文档里。

(2)

获取元素方法：

getElementById getElementsByTagName getAttribute

添加元素方法：

createElement createTextNode appendChild insertBefore setAttribute

(3)DOM不仅可以改变文档结构，还可以用来更新HTML页面元素的CSS样式。

2018.12.9:

第九章：CSS-DOM

一、三位一体的网页：结构层、表示层、行为层

1、结构层：标记语言创建

2、表示层：CSS负责

3、行为层：JavaScript和DOM主宰的领域

4、分离：结构---（X）HTML 样式---CSS 行为---DOM脚本

注：三者之间存在一些潜在的重叠区域

二、style属性：

eg：<p style="color:grey;font-family:'Arial'; "/>

PS:typeof ---->获取元素的类型

注：每个元素都有style属性

1、获取样式：element.style.color

DOM一律采用驼峰命名法来表示

eg：font-family---DOM属性--->fontFamily

background-color---DOM属性--->backgroundColor

（颜色格式：RGB、16进制值）

（1）样式在外部文件或者head中定义的样式不能通过DOM提取对象

（2）用DOM设置的样式，就可以用DOM检索出来对象

2、设置样式：element.style.property=value;

注：style对象的属性值永远是一个字符串

eg：para.style.color="2em 'Times',serif";

三、何时该用DOM脚本设置样式

1、根据元素在节点树里的位置

（1）标签元素（2）class属性所有统一的样式（3）id单独声明（4）有类似属性的多个属性的多个元素生命样式（示例如下：）

eg：input[type* = "text"] {

font-size : 12em;

}

(5)现代浏览器中，甚至可以根据位置声明样式:

eg： CSS中的其中一个位置选择器

p;first-of-type{

font-size:2em;

font-weight:bold;

}

PS：CSS2中引入很多与位置相关的选择器：

（1）：first-child（2）：last-child

CSS3中

（1）：nth-child（）（2）：nth-of-type()

BUT，有太多浏览器根本不支持CSS3

PS：nextSibling--->文档中的下一个节点

2、根据某种条件反复设置某种样式：

注：<table/>利用表格来做页面布局不是好主意，但利用其显示数据确是理所当然的

3、响应事件：

eg: (1)a:hover{...}----CSS (2)onmouseover---DOM

注：绝大多数的现在浏览器，虽然对CSS伪类的支持很不完整，但是对DOM却有着良好的支持。

eg：row[i].onmouseover = function() {......}

row[i].onmousepout = function() {......}

四、className属性：element.className

注：通过className属性设置某个元素的class将替换（而不是追加）该元素原有的class设置。

但是！希望追加的话，可以利用字符串拼接

eg：elem.className = " classname";(样式名之前有一个空格)

PS：若需要追加样式可以有如下的操作：

（1）检查className属性值是否为null（2）若是则赋值（3）否则追加属性

注：对函数进行抽象----通用化

2018.12.12

第十一章：HTML5：什么是HMTL5、如今如何使用HTML5、简单介绍一些特性

一、HTML5简介：

HTML5——》HTML4——》XHTML——》Web Apps 1.0——》HTML5

Web设计：

（1）结构层——》HMTL

（2）样式曾——》CSS

（3）行为层——》DOM

（4）（浏览器）JavaScript API：cookie等

1、新标签：<section>、<article>、<header>、<footer>

交互及媒体元素：<canvas>、<audio>、<video>

表单新增了颜色拾取器、数据选择器、滑动条和进度条

PS：其中很多新元素都还带有自己的JavaScript和DOMAPI

2、JavaScript API还包括很多其他模块：Geolocation、Storage、Drag-and-Drop、Socket以及多线程等

可利用一些可靠的特性检测（HTML5是否被支持），或者使用=》渐进增强机制

Modernizr：一个开元的JavaScript库