搜索
首页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
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

禅工作室 13.0.1

禅工作室 13.0.1

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