JavaScript DOM编程艺术第二版学习(1/4)

接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书。

记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~

当前水平:HTML&CSS&JS基本掌握,能在阅读文档以及Google查找的情况下完成前端代码编写,但是学习不深,HTML5&CSS3新特性、JS基础&框架皆不熟悉

读书目的:了解DOM概念并通过训练熟悉掌握,了解JS特性

博客目的:督促自己学习并记录下过程

博客编写时读书进度:第6章完结

 

  阅读规划:

    浏览目录之后,总结该书学习思路大致如下(其实就是生搬目录):

      简史-》最基础语法-》DOM-》动态标记的创建-》充实文档的内容(不懂照抄)-》CSS DOM-》JS动画-》HTML5特性简介

      456这三章以图片库为练习项目来具体讲解程序优化、分离、兼容等问题,程序比较简单,了解结果之后可以自己写完再与书中的对比

      12章为综合实例,尚未了解

  开始阅读:

    一、简史:

      导读:基本概念

      内容:

        DOM概念:一套对文档的内容进行抽象&概念化的方法, 亦是一种得到共同认可的基本约定。

        DOM标准化作用:可以让 任何一种Programming Language使用任何一种标记语言所编写出来的文档  进行操控!(json&xml&xaml之类的)

        浏览器引擎: WebKit(Safari & Chrome) 、 Gecko(Firefox)

      思考:至此,DOM的概念还是不清晰,知道DOM将文档划分层级(或说是树)来方便文档的操作,但是在浏览器上的表现和作用体现在哪呢?

    二、最基础语法:

      导读:最基础的语法,所以只是节选一些觉得之前不太了解的

      内容:

        1、数组初始化有多种方式: 

        var array1 = Array();    //无长度空数组var array2 = Array(4);  //有长度空数组var array3 = [];           //无长度空数组var array4 = ["A","B"];  //普通数组    

        2、用对象来代替数组将大大提升可读性:

        var a={}a.first = "xiaoming";a.second = "qixi";

        3、对象分为:内建对象、宿主对象、用户自定义对象(同上,这本书说读者自己玩所以不介绍)

          内建对象:就是一些JS已经定义好的对象,有学过Java的童鞋可以把这货当做 Java的,就是 System.currentTimeMillis & new Person().year 这样的东西

          宿主对象:不是由JS提供,而是由代码运行环境提供(也就是浏览器!),有Form、Image、Element以及document(JS大佬)

      思考:看完本章主要收获是在 对象 方面,JS的document原来是属于宿主对象的!那window呢?

      思考答复:

        本书3.2有讲到window:

          window对象是宿主对象 最基础的对象 。window 对应着浏览器窗口本身,提供了浏览器的各种基础操作方法如open()、blur()。

    三、DOM:

      导读:'D'、'O'、'M'的概念,节点操作,属性操作 (同目录)

      内容 : 

        1、DOM概念:

          'D': 网页文档 =》 文档对象 (操作对象);

          'O': 同 第二章 =》内容 =》第3点;

          'M': 直接翻译是'model'或者'map',即能够通过'M'来看懂DOM的信息。

          DOM的作用: 一份文档 =》一颗树(数学或编程意义上的层级关系)

            通过树的模型来描述文档中各个节点之间的关系,所以也将文档称为 "节点树"

        2、节点操作

          a、节点类型:

            在JS中使用 "节点.nodeType" 可以得到对应的数字,一般只得到到1(元素节点)、2(属性节点)、3(文本节点)

              元素节点:<body>、<p>这样的;

              属性节点:<p title="我是属性节点"> , 加粗位置即为一个属性节点

              文本节点:<p>我是文本节点</p>元素节点中间包含的加粗文本这样的;

            属性节点总是被包含在元素节点中,文本总是在属性节点下一级。每个节点都是一个对象!不信的typeof节点试试~

            还有许多不同类型的节点,详细可参见: w3c NodeType详解

          b、操作节点:(都是document特有的函数)

            getElementById(idname)  return一个结果--具有对应id的元素对象

            getElementsByTagName(tagname) return一个数组--document中所有元素为tagname的对象集合

            getElementsByClassName(classname) return一个数组--document中所有类名为classname的对象集合 (该方法为HTML5 DOM中新增)

              *这里有个小东西可以做的,因为HTML5 DOM才提供getElementsByClassName,所以可能有的浏览器用不了(。。但是我觉得没有咯),所以可以手撸一个getElementsByClassName

               书里有教程和代码,思路我描述一下:

         3、属性操作

            getAttribute&setAttribute 获取&修改节点属性。

         DOM的工作模式在此得以体现:

          先加载静态html,然后用JS动态刷新。这样做可以刷新页面内容不需要在浏览器里刷新

       思考:嗯这章没啥好思考的,就是明白了DOM如何处理文档&复习一下DOM提供的基础操作方法~接下来4-6章的图片库练习

          

   转发请注明出处:http://www.cnblogs.com/qixi233/p/5525633.html

     

转载于:https://www.cnblogs.com/qixi233/p/5525633.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395873.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

github开源大项目_GitHub刚刚发布了一份大规模的开源指南

github开源大项目Here are three links worth your time:这是三个值得您花费时间的链接&#xff1a; GitHub just released a massive guide to contributing to open source (5 to 60 minute read) GitHub刚刚发布了一份有关开源的大型指南( 阅读5至60分钟 ) A new way to br…

mysql中where条件判断语句_MySQL Where 条件语句介绍和运算符小结

WHERE 条件有时候操作数据库时&#xff0c;只操作一些有条件限制的数据&#xff0c;这时可以在SQL语句中添加WHERE子句来规定数据操作的条件。语法&#xff1a;SELECT column,… FROM tb_name WHERE definitionWHERE 关键字后面接有效的表达式(definition)&#xff0c;该表达式…

node webkit(nw.js) 设置自动更新

原理&#xff1a;把更新的文件放在服务器上&#xff0c;设置一个客户端版本号&#xff0c;每次打开客户端的时候&#xff0c;通过接口获取服务器上的版本&#xff0c;如果高于本地的版本就下载服务器上的代码&#xff0c;低于或等于就不更新 1 <script>2 var htt…

个人工作总结04(冲刺二)

今天是团队第二次冲刺阶段开始的第04天&#xff0c;我的工作总结如下&#xff1a; 一、昨天干了什么&#xff1f; 知识圈查询功能 基本实现数据库查询 (未完成) 二、今天准备做什么&#xff1f; 知识圈查询功能 基本实现数据库查询 三、遇到了什么困难&#xff1f; 数据库访问出…

mysql8.0版1130_navicat premium连接mysql 8.0报错error 10061和error1130问题

昨天安装了最新版的mysql navicat premium, 但没来得及测试使用Navicat连接。今天上班时&#xff0c;使用Navicat premium连接mysql时&#xff0c;出现报错ERROR 2003 (HY000): Can’t connect to MySQL server on ‘1XX.XX.XX.XX’ (10061).起初以为是mysql没有安装成功&#…

freecodecamp_为什么您一定要参与freeCodeCamp的一个研究小组

freecodecampby Frederick Ige弗雷德里克艾格(Frederick Ige) 为什么您一定要参与freeCodeCamp的一个研究小组 (Why you should definitely get involved with one of freeCodeCamp’s study groups) I’m writing this article in hopes of convincing you to take advantage…

C语言运行时数据结构

段&#xff08;Segment&#xff09;&#xff1a; 对象文件/可执行文件&#xff1a; SVr4 UNIX上被称为ELF&#xff08;起初"Extensible Linker Format", 现在"Executable and Linking Format"&#xff09;文件。BSD UNIX上被称为a.out。这些格式都具有段的…

Java挂起线程

2019独角兽企业重金招聘Python工程师标准>>> 不优雅的suspend import java.util.concurrent.TimeUnit;public class SuspendTest {static Object lock new Object();SuppressWarnings("deprecation")public static void main(String[] args) {Suspend s1…

Hibernate包及相关工具包下载地址

Hibernate包及相关工具包下载地址&#xff1a; http://prdownloads.sourceforge.net/hibernate/ 这里包含所有hibernate各个版本的包下载&#xff0c;且提供了 Middlegen Hibernate及hibernate-extensions包的下载。这两个包是用于自动生成相就的JAVA和*.hb…

init(coder:)_2018年《 New Coder》调查:31,000人告诉我们他们如何学习编码并在工作中获得工作…

init(coder:)More than 31,000 people responded to our 2018 New Coder Survey, granting researchers an unprecedented glimpse into how adults are learning to code.超过31,000人对我们的2018年《新编码器调查》做出了回应&#xff0c;使研究人员对成年人如何学习编码有了…

Redis源码解析:21sentinel(二)定期发送消息、检测主观下线

六&#xff1a;定时发送消息 哨兵每隔一段时间&#xff0c;会向其所监控的所有实例发送一些命令&#xff0c;用于获取这些实例的状态。这些命令包括&#xff1a;”PING”、”INFO”和”PUBLISH”。 “PING”命令&#xff0c;主要用于哨兵探测实例是否活着。如果对方超过一段时间…

[SDOI2018]原题识别

题解&#xff1a; 。。感觉挺烦得 而且我都没有注意到树随机这件事情。。 就写个30分的莫队。。 #include <bits/stdc.h> using namespace std; #define rint register int #define IL inline #define rep(i,h,t) for (int ih;i<t;i) #define dep(i,t,h) for (int it;…

django app中扩展users表

app models中编写新的User1 # _*_ coding:utf-8 _*_2 from __future__ import unicode_literals34 from django.db import models5 from django.contrib.auth.models import AbstractUser # 继承user67 # Create your models here.8910 class UserProfile(AbstractUser):11 …

[bzoj2301] [HAOI2011]Problem b

Description 对于给出的n个询问&#xff0c;每次求有多少个数对(x,y)&#xff0c;满足a≤x≤b&#xff0c;c≤y≤d&#xff0c;且gcd(x,y) k&#xff0c;gcd(x,y)函数为x和y的最大公约数。 Input 第一行一个整数n&#xff0c;接下来n行每行五个整数&#xff0c;分别表示a、b、…

华为p4用鸿蒙系统吗_华为p40pro是鸿蒙系统吗

华为的鸿蒙OS是一款“面向未来”的操作系统&#xff0c;一款基于微内核的面向全场景的分布式操作系统&#xff0c;此前mate30系列并没有搭载鸿蒙系统。那华为p40pro是鸿蒙系统吗&#xff1f;品牌型号&#xff1a;华为p40pro华为p40pro是鸿蒙系统吗&#xff1f;华为p40pro没有搭…

设置MYSQL允许用IP访问

mysql>use mysql;mysql>update user set host % where user root;mysql>flush privileges;mysql>select host,user from user where userroot;mysql>quit 转载于:https://www.cnblogs.com/vipstone/p/5541619.html

Web优化 --利用css sprites降低图片请求

sprites是鬼怪&#xff0c;小妖精&#xff0c;调皮鬼的意思&#xff0c;初听这个高端洋气的名字我被震慑住了&#xff0c;一步步掀开其面纱后发觉非常easy的东西。作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中非常多小图片&#xff08;非常多图标文件&#xff09;做…

[BZOJ3203][SDOI2013]保护出题人(凸包+三分)

https://www.cnblogs.com/Skyminer/p/6435544.html 先不要急于转化成几何模型&#xff0c;先把式子化到底再对应到几何图形中去。 1 #include<cstdio>2 #include<algorithm>3 #define rep(i,l,r) for (int i(l); i<(r); i)4 typedef long long ll;5 using names…

轻松创建nodejs服务器(1):一个简单nodejs服务器例子

这篇文章主要介绍了一个简单nodejs服务器例子,本文实现了一个简单的hello world例子,并展示如何运行这个服务器,需要的朋友可以参考下我们先来实现一个简单的例子&#xff0c;hello world。 似乎每种语言教程的第一节都会讲这个&#xff0c;我们也不例外。 首先我们先创建一个项…

谁是赢家_人工智能竞赛正在进行中。 这是赢家。

谁是赢家by Terren Peterson由Terren Peterson 人工智能竞赛正在进行中。 这是赢家。 (The race is on for artificial intelligence. Here’s who is winning.) On Saturday, Louisville, Kentucky hosted the 143rd running of the Kentucky Derby. It was a spectacle wher…