搜索
首页web前端js教程一起了解javascript dom 编程, 实战经验记录笔记

最近都在学习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(&#39;canvas.html&#39;);

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(&#39;imagegallery&#39;)) return false;
    var gallery = document.getElementById(&#39;imagegallery&#39;);
    var links  = gallery.getElementsByTagName(&#39;a&#39;);
    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(&#39;hello world&#39;);
var p = document.getElementById("myp");
p.appendChild(p);
p.appendChild(txt);

28.insertBefore(),:在元素的前面插入元素,

相关文章:

《Java Script DOM编程艺术》读书笔记

《JavaScript DOM 编程艺术》读书笔记之DOM基础_javascript技巧

相关视频:

JavaScript&DOM视频教程

以上是一起了解javascript dom 编程, 实战经验记录笔记的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Python vs. JavaScript:性能和效率注意事项Python vs. JavaScript:性能和效率注意事项Apr 30, 2025 am 12:08 AM

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

JavaScript的起源:探索其实施语言JavaScript的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

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

幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

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

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

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

Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

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

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

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

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

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

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具