最近都在学习JavaScript dom 编程了,怕自己以后会忘,特地对自己学习的内容进行了归纳整理, dom操作是什么?Document object mode 是w3c的标准。
1.JavaScript是一个使网页具有交互能力的程序设计语言。
2.设定浏览器属性的属性的方法叫做BOM.
3.驼峰式命名(myMood)是函数名、方法名和对象属性名的命名首选格式。
4.命名变量的时候可以用下划线来分隔每个单词,命名函数的时候使用驼峰式命名。
5.函数在行为方面应该像一个自给自足的脚本,在定义一个函数时,我们一定要把他内部的变量全都明确地声明为局部变量。
6.由浏览器预先定义的对象被称为宿主对象。宿主对象包括From、Image,document等。
7.DOM(document object model)。
8.在DOM中有元素节点(标签)(文档中每一个元素都是一个对象)、文本节点(内容)、属性节点(属性)。
9.即使在整个文档中这个标签只有一个元素,getElementsByTagName也返回一个数组,此时数组的长度是1.。
10.getElementsByClassName返回的是一个具有相同类名的元素的数组。
11.使用getElemntsByClassName指定多个类名的时候,只需要在参数的时候将多个类名以空格隔开
。
12.getElementsById返回的是一个对象,对象对应着文档里的一个特殊的元素节点
。
13.getAttribute和setAttribute两个函数都只能用于元素节点。
14.DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容,对页面内容进行刷新却不需要在浏览器里刷新页面。
15.在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会执行。被调用的JavaScript代码可以返回一个值,这个值就会被传递给事件处理函数。假设在a标签onclick里面指定事件处理函数,当这个函数返回一个true的时候,onclick事件就会认为a标签中的链接被点击了,如果返回的是false就会被认为这个链接2没有被点击。所以,如果想要不触发a标签中的默认行为,在onclick里面添加一句return false。
<li><a href="img/1.png" onclick="showpic(this);return false;">1</a> </li>
16.childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组。
17.要想知道一个节点的类型,可以使用nodeType来查看节点的类型
nodeType=1 节点为元素节点
=2 属性节点 =3 文本节点
18.window.open()打开一个新的浏览器窗口。
function popUrl(winURL) { window.open(winURL,"popup","width:320px,height:400px"); } popUrl('canvas.html');
19.平稳退化(当浏览器不支持js代码的时候不影响网页的正常功能。)
20.性能考虑
(1)尽量少访问DOM:不管什么时候,只要是查询DOM中的某些元素,浏览器都会搜索整个DOM树,从中查找可能匹配的元素。换句话就是或每次使用getElementBy*的时候都会遍历整个DOM树,所以最好是使用一次来获得元素并将元素存储在一个变量当中。
(2)尽量少使用标记:过多不必要的元素只会增加DOM树的规模,进而增加遍历DOM树以查找特定元素的时间。
(3)包含脚本的最佳方式就是使用外部文件,并将多个js文件合并在一起。就可以减少加载页面时发送的请求数量。
(4)把所有Script标签都放在文档的末尾,body标签结束之前,就可以让页面变得更快。
(5)压缩脚本:把脚本文本中不必要的字节,如空格和注释统统删除,从而达到压缩文件的目的。
21.HTTP协议规范,浏览器每次从同一个余名中最多能同时下载两个文件。
22.如果想用JavaScript给某个网页添加一些行为,就不应该让JavaScript代码对这个网页的结构有任何依赖。
23.如果一个函数有多个出口,将这些出口集中安排在函数的开头部分。
24.循环判断一组a标签被点击后所做的js处理
function prepareGallery() { if (!document.getElementById) return false; if (!document.getElementsByTagName) return false; if (!document.getElementById('imagegallery')) return false; var gallery = document.getElementById('imagegallery'); var links = gallery.getElementsByTagName('a'); for (var i = 0; i < links.length; i++){ links[i].onclick = function () { showpic(this); return false; } } }
25.addLoadEvent():自己编写脚本函数,用来添加页面加载的时候需要处理的函数
function addLoadEvent(func) { var onload = window.onload; if (typeof window.onload !=func){ window.onload = func; }else { window.onload = function (ev) { oldload(); func(); } } }
26.createTextNode用来创建文本节点
var txt = document.createTextNode("hello world");
27.js想要在文档里面插入内容的时候,要从dom的角度出发。例如在p里面插入一个p段落:
2e6389acaed1643776f9c53224c111af94b3e26ee717c64999d7867364b1b4a3
在js里面想要插入一个p
var p = document.createElement("p"); var txt = document.creatTextNode('hello world'); var p = document.getElementById("myp"); p.appendChild(p); p.appendChild(txt);
28.insertBefore(),:在元素的前面插入元素,
相关文章:
《JavaScript DOM 编程艺术》读书笔记之DOM基础_javascript技巧
相关视频:
以上是一起了解javascript dom 编程, 实战经验记录笔记的详细内容。更多信息请关注PHP中文网其他相关文章!

引言我知道你可能会觉得奇怪,JavaScript、C 和浏览器之间到底有什么关系?它们之间看似毫无关联,但实际上,它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章,你将了解到JavaScript如何在浏览器中运行,C 在浏览器引擎中的作用,以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道,JavaScript是前端开发的核心语言,它直接在浏览器中运行,让网页变得生动有趣。你是否曾经想过,为什么JavaScr

Node.js擅长于高效I/O,这在很大程度上要归功于流。 流媒体汇总处理数据,避免内存过载 - 大型文件,网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python和JavaScript在性能和效率方面的差异主要体现在:1)Python作为解释型语言,运行速度较慢,但开发效率高,适合快速原型开发;2)JavaScript在浏览器中受限于单线程,但在Node.js中可利用多线程和异步I/O提升性能,两者在实际项目中各有优势。

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

Dreamweaver CS6
视觉化网页开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。