《JavaScript DOM编程艺术》笔记

最新推荐文章于 2021-12-06 20:37:14 发布
最新推荐文章于 2021-12-06 20:37:14 发布
阅读量802 收藏
点赞数
分类专栏： css 文章标签： css 网页设计 html dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jesse_He/article/details/38022855
版权

    • 注意代码分离：

        • CSS表示层
        • JS行为层
        • HTML内容

      标记良好的代码就是一切！

      Html：

      • id实现页内导航： id=here <a href="#here"/>
      • XHTML ： <img /><br />为了向后兼容，反斜杠前有一个空格

      JS：

      • js关联数组：vocalist[“piano”][name]=“Jhon”;
      • js内建对象：Array()\Date()\Math
      • 宿主对象：Form\Image\Element
      • Var variable=setTimeout("functionName",1000ms);隔一段时间执行一次函数
      • clearTimeOut(variable);清除等待队列中的函数
      • parseInt("")的返回值永远是整数
      • element.property 可以为元素创建属性
      • Math.ceil(number);向大于方向舍入最接近的整数
      • Math.floor(number);~~小于~~
      • Math.round(7.53438);四舍五入：向最接近的整数舍入
      • 当前页面的urlwindow.location.href;
      • String.indexOf(subString) ；
      • String.splitting(char)：以char将string分成数组，char属于前一个
      • window.onload = functionName;
      • /*页面加载完毕再执行，可重写使页面加载时执行若干函数(eg:
      • addLoadEvent(preparePlaceholder);
      • addLoadEvent(prepareGallery);
      • )*/


      CSS：

      • 选择器、默认继承，因此特殊性大的要后定义
      • z-index 属性设置元素的堆叠顺序,数值越大，越在前面，PS：仅能在定位元素上奏效
      • overflow:visible\hidden\scroll\auto;全看到、隐藏多出的部分、滚动条、又多出才有滚动条
      • margin: 1em 10%;缺少4做外边距从2右外边距复制，缺少3下外边距，从1上外边距复制；百分数是相对于父元素算的
      • display:inline-block;行内块
      • margin:auto;居中显示
      • list-style:none;去掉ul\li\id等元素的默认样式
      • text-decoration:none;a没有下划线
      • text-align:center;文字居中显示
      • imv的alt属性有利于图片被搜索到；title属性，鼠标悬停会显示
      • <html lang=“zh-CN”>
      • <meta charset="utf-8">
      • 定义列表<dl><dt><dd>标题和描述
      • search robot对em、strong的内容会关注
      • 引用：block quote 自动缩进; cite属性标志引用来源
      • <pre>保留换行、显示代码

       

      DOM方法和属性：


      0、
      CSS-DOM:

      元素节点:
      1\与位置相关的属性：firstChild\lastChild\nextSibling\previousSibling\parentNode\ChildNodes
      2\与本身有关属性：nodeType\nodeName
      3\style 属性，返回对象:elementt.style.property,属性以驼峰命名方式，不能检索外部CSS文档的信息
      4\element.className 可读可写 ；等价于element.setAttribute("class","className")


      1、

        • element.childNodes 含给定元素节点的子元素数组
        • node.firstChild=node.childNodes[0]
        • node.lastNode
        • node.nodeValue 返回节点的值
        • Reference=node.cloneNode(deep：true\false)；返回指向新节点的指针，true子节点一起复制，但属性节点会一起复制
        • Parent=element.removeChild(node);
        • Parent=element.replaceChild(new,old);
        • insertAfter()自己写
        • attributeValue = element.getAttribute(attributeName);返回属性值
        • booleanValue=element.hasChildNodes;


      2、

        • node.nodeType 代表节点的数字，12种：元素节点1、属性节点2、文本节点3、

      3、

      1级DOM(DOM Core): HTML-DOM 返回类型
      document.getElementById(“idValue”) return 元素节点对象
      document/element.getElementByTagName(“tag name”)documet.TagName（eg：document.body == document.getElementByTagName("body")[0]return 整个文档/元素下所有的对象的数组
      element/object.getAttribute(“Attribute”)element.attributeNamereturn 属性值
      object.setAttribute(“Attribute”,”Attribute Value”)element.attributeNAme = Attribute Value不会改变文档本身的源代码：动态刷新不影响文档静态内容 

      4、
      用JS写入HTML：node.nodeValue="value";

      旧方法：

        • document.whrite(“HTML statement”)
        • innerHTML();读写，无法区分插入、替换，并且会替换源文件

      DOM：只改变DOM节点树，对源文件不做物理性改变/*不要滥用，重要内容不要用这种方式添加*/

        • createElement("nodeName");返回指向新节点的指针
        • document.createTextNode("Text");返回指向新节点的指针
        • parent.appendChild(child);
        • insertBefore();

      Ajax：

        • 异步：不用每次做出一个改动就重新刷新整个页面；
        • 快速透明：google的及时关键词提示；
        • XMLHttpRequest

      ===============优雅的分割线====================

      写优雅的代码应该注意什么？

      • 程序被执行的顺序：从上到下、if分支、while等循环、中断异常
      • 程序化设计：一个入口一个出口；/*实际中为了功能和代码的优雅可以不遵循*/

      黄金准则：
      1、循序渐进：从最核心的内容（用HTML给核心内容加上最正确的标签，使她呈现正确的结构），然后逐步充实内容！
      2、预留退路


      写HTML需要注意什么？

      1、使用的标记必须与做出的doctype声明保持一致！

      2、写语义正确的HTML代码

      3、Html 变量名应该用功能性命名，而不是样式命名

      HTML5的意义：
      标准 跨浏览器 标准的重要性 兼容
      /*浏览器嗅探，很难做到面面俱到，还使代码复杂*/

       

      CSS不要过度依赖类选择器\ID选择器，要组合使用类型后代id和类\伪类

      Js要注意空的判断，使程序不会异常退出：
      1、检测dom方法、检测对象，为程序预留退路（没有js也不影响内容的正常显示）

      2、检测不到对象，程序也能正常运行



Jesse_He
关注
专栏目录
javascript Dom 编程艺术
08-11
JavaScript是Web开发中最重要的一门语言，它强大而优美。无论是桌面开发，还是移动应用。JavaScript都是必须掌握的技术。W3C的DOM标准是开发Web应用的基石。已经得到所有现代浏览器的支持，这使得跨平台Web开发成了一件轻松惬意的事。 本书是超级畅销书的升级版，由倡导Web标准的领军人物执笔，揭示了前端开发的真谛，是学习JavaScript和DOM开发的必读之作。 本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库。读者将看到JavaScript、 HTML5和CSS如何协作来创建易用的、与标准兼容的Web设计，掌握使用JavaScript和DOM通过客户端动态效果和用户控制的动画来加强 Web页面的必备技术；同时，还将对如何利用库提高开发效率有全面深入的理解。
JavaScript Dom编程艺术
04-09
JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术
JavaScriptDom编程艺术
10-28
JavaScriptDom编程艺术，一本很好的前端书籍，有兴趣的可以看看
JavaScript-DOM编程艺术
qq_44572030的博客
12-06 368
JavaScript-DOM编程艺术 1,document.getElementById / getElementsByClassName / getElementsByTagName 2,object.getAttribute() object.setAttribute(attribute,value) 3,nodeType节点{元素节点：nodeType === 1 属性节点：nodeType === 2 文本节点：nodeType === 3 } 4,nodeValue 5,firstChild();
读JavaScript DOM编程艺术笔记
10-28
JavaScript DOM编程艺术笔记的知识点涵盖了在网页开发中，如何通过JavaScript操作文档对象模型（DOM）来实现各种动态网页效果。以下是根据提供的内容总结的知识点： 1. 获取DOM元素的下一个兄弟节点 在DOM操作中，...
《JavaScript DOM编程艺术》笔记1
sina_panda
03-08 359
1：DOM的学习一份文档就是一棵节点树； 节点分为不同的类型：元素节点，属性节点，文本节点； getElementById返回的是一个对象； getElementByTagName和getElementByclassName返回的是一个对象数组，分别对应着文档中一个特定的元素节点； 每个节点都是一个对象； getAttribute获取属性节点的值 setAttribute设置属性节点的值 例子：`
《JavaScript_DOM编程艺术》笔记
DullSwordCN的博客
09-27 249
其中一些是我自己的理解，绝大部分是照抄书上的话，虽然记下来的有些东西已经过时、不适用了，但思想还是很值得学习。 结构化程序设计原则 函数应该只有一个入口和一个出口。 但在实际工作中，过分拘泥于这项原则往往会使代码变得非常难以阅读。如果一个一个函数有多个出口，只要这些出口集中出现在函数的开头部分，就可以接受。 平稳退化 让高配表现出应有的效果，同时又让低配降级体验，不至于失效，流失...
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
10-24
《JavaScript DOM编程艺术》一书中涉及的JavaScript语法，涵盖了变量命名规则、字符串处理、数组与对象的概念、注释方式以及数据类型和相等性操作符的使用等多个方面。 首先，变量命名是编程中的一项基础工作。在...
JavaScript DOM编程艺术笔记
wwy6191的博客
11-09 602
二、 1.math.round() 四舍五入：d 2.5-->3 2.49-->2 -2.5-->-2 -2.51-->-3 数轴上，在0.5的右侧就往右侧走。 2.date() var current_date = new Date(); getDay(); getMonth(); getHours(); 等方法。
JavaScript DOM编程艺术
Matrix
06-25 2841
chapter 2: JavaScript 语法 JavaScript嵌入到html中的方式: 3种 作为一种解释型语言直接被浏览器读入并执行 语法 语句: 像英语中的句子,只不过受体是浏览器 注释: 受体是开发和维护的人.方式: //, /*...*/ 变量: 计算机中的一小块固定的内存区域,变量指向这块内存的地址,内存代表的值就是变量的值. 程序运行过程中,变量的值可以改...
javascriptDom编程艺术
07-22
资源名称：javaｓｃｒｉｐｔ Dom 编程艺术   资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
JavaScript DOM编程艺术——（一）
gezilan的博客
03-21 232
JavaScript简史 浏览器在早期只是用来显示HTML（超文本文档）的简单工具，是一个打开HTML文件的软件。而javascript是由netspace 和sun合作开发的，并由于微软的竞争压力，nespace和sun联合ECMA（欧洲计算机制造协会）对javascript进行了标准化，也就是现在ECMAScript标准，也就是ES 1标准。 javascript是一种脚本语言，它本身不能...
JavaScript DOM 编程艺术（含源码）
01-14
英文原版DOM Scripting Web Design with JavaScript and the Document Object Model，语言通俗易懂，适合dom和javascript初学者。
JavaScript DOM编程艺术（中文第二版）学习笔记
08-19
总的来说，JavaScript DOM编程艺术这本书涵盖了JavaScript基础、DOM操作以及实际应用，是学习网页动态交互和JavaScript编程的重要资源。通过学习，开发者能够熟练地创建交互式、动态的网页内容。
JavaScript DOM编程艺术 笔记
Stella的博客
06-21 188
JavaScript简史 JavaScript是一门脚本语言、解释性语言以及弱类型语言 解释型语言：不需要编译器，只需要解释器。例如：JavaScript在浏览器中进行解释和执行 弱类型语言：对变量没有明确的定义，例如：var i即可能是整数，也可能是字符串 DOM（文档对象模型） 对文档内容进行抽象和概念化的方法 每一个网页就是一个文档对象，平常我们也称之为"DOM树" JavaSc...
Javascript_DOM编程艺术(上)
Ellie棒棒哒的博客
03-26 1288
javascript_DOM
Javascript DOM编程艺术(中文版)
11-17
我自己都没有注意只有四章...看了三章后直接看的高级编程之后用了jquery...上传的时候一直以为是全的..要下载完全的朋友请绕过不过前三章挺不错的
《JavaScript DOM 编程艺术》
weixin_36986228的博客
02-01 889
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值