搜索
您的当前位置:首页JavaScriptDOM操作提高篇

JavaScriptDOM操作提高篇

时间:2023-12-01 来源:乐玩宠

做为一个web前端,处理和了解浏览器差异一个重要问题.下面将介绍本人在工作中的一些笔记总结,先介绍没有使用js库的情况。

1.  setAttribute方法设置元素类名 : 在jQuery中,直接使用attr()方法即可,可在原生的JS中

element.setAttribute(class,newClassName) //这个是W3C的标准,在兼容W3C标准的浏览器中有效,可是,IE才是国内用户的主旋律element.setAttribute(className,newClassName) //这样的设置在IE中才能有效element.className = newClassName //所有浏览器有效(只要支持javascript)   好了,开篇说完了,这篇文章的目的也就是介绍浏览器差异的同时使前端的朋友们了解如果用最有效的方法去解决问题,下面继续。

2.  FireFox没有window.event对象,只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成:

function handle(e){e = e || event;...}  3.  DOMContentLoaded事件原理:对window.onload事件是当页面解析/DOM树建立完成,并完成了如图片、脚本、样式表等所有资源的下载后才触发的。这对于很多实际的应用而言有点太“迟”了,比较影响用户体验。为了解决这个问题,FF中便增加了一个DOMContentLoaded方法,与onload相比,该方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载(这个也就是jquery.ready()事件的实现原理)。

//以下是jQuery 1.4.2版本的原版分析

bindReady: function() {  if ( readyBound ) {    return;  }  readyBound = true;  // Catch cases where $(document).ready() is called after the  // browser event has already occurred.  if ( document.readyState === "complete" ) {    return jQuery.ready();  }  // Mozilla, Opera and webkit nightlies currently support this event  if ( document.addEventListener ) {  // Use the handy event callback    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );    // A fallback to window.onload, that will always work    window.addEventListener( "load", jQuery.ready, false );    // If IE event model is used  } else if ( document.attachEvent ) {    // ensure firing before onload,    // maybe late but safe also for iframes    document.attachEvent("onreadystatechange", DOMContentLoaded);    // A fallback to window.onload, that will always work    window.attachEvent( "onload", jQuery.ready );    // If IE and not a frame    // continually check to see if the document is ready    var toplevel = false;    try {      toplevel = window.frameElement == null;    } catch(e) {}    if ( document.documentElement.doScroll && toplevel ) {      doScrollCheck();    }  }}   设计思路 - 将Webkit与Firefox同等对待,都是直接注册DOMContentLoaded事件,但是由于Webkit是在525以上版本才引入的,因此存在兼容性的隐患。对于IE,首先注册document的onreadystatechange事件,经测试,该方式与window.onload相当,依然会等到所有资源下载完毕后才触发。之后,判断如果是IE并且页面不在iframe当中,则通过setTiemout来不断的调用documentElement的doScroll方法,直到调用成功则出触发DOMContentLoaded。1 jQuery对于IE的解决方案的原理是,在IE下,DOM的某些方法只有在DOM解析完成后才可以调用,doScroll就是这样一个方法,反过来当能调用doScroll的时候即是DOM解析完成之时,与prototype中的document.write相比,该方案可以解决页面有iframe时失效的问题。此外,jQuery似乎担心当页面处于iframe中时,该方法会失效,因此实现代码中做了判断,如果是在iframe中则通过document的onreadystatechange来实现,否则通过doScroll来实现。不过经测试,即使是在iframe中,doScroll依然有效。

4.  学会使用IE的条件注释。许多前端总是在抱怨万恶的IE,确实,处理兼容性的问题确实会越来越恶心,可是没有办法,既然没有办法改变,那么请享受...

<!--[if IE]><h1>您正在使用IE浏览器</h1><![endif]--><!--[if IE 5]><h1>版本 5</h1><![endif]--><!--[if IE 5.0]><h1>版本 5.0</h1><![endif]--><!--[if IE 5.5]><h1>版本 5.5</h1><![endif]--><!--[if IE 6]><h1>版本 6</h1><![endif]--><!--[if IE 7]><h1>版本 7</h1><![endif]-->  今天就先总结到这里吧,下周收假回来有时间发高级AJAX篇,希望能对新手或者有需要的人有所帮助.由于文笔有限,写的不好也请见谅,这个刚刚开始写博客,成长阶段嘛。哈哈...

小编还为您整理了以下内容,可能对您也有帮助:

JS之DOM操作

DOM: Document Object Model,文档对象模型;js提供了丰富的api来操作文档内容。
DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body
节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。
可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

特殊的元素节点:
1、html元素

2、body元素

3、head元素

节点操作的api(属性和方法)
1、nodeName:只读属性,可以读取节点名称

2、nodeType:只读属性,读取节点类型

3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

5、firstChild:获得节点的第一个子节点

6、lastChild:获得节点的最后一个子节点

7、querySelector():
参数:string类型,css选择器
作用:获得文档中第一个符合选择器条件的节点
兼容:在IE9以下不支持

8、 querySelectorAll(): // 获得的都是静态集合
参数:string类型,css选择器
作用:获得文档中所有符合选择器条件的节点集合(类数组结构)
兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling:获取节点的前一个兄弟节点

10、nextSibling:获取节点的后一个兄弟节点

11、parentNode:获得节点的父节点(父节点一定是元素节点)

12、removeChild():节点删除它的指定子节点
DOM操作元素:暂时不用的隐藏、一定不用的删除。

13、cloneNode():克隆一个节点
参数:boolean类型,true深克隆,false浅克隆,默认浅克隆
深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点
浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

14、a.replaceChild(b,c):用b替换c
其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

15、a.replaceWith(b):用b替换a
a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

16、a.insertBefore(b,c):在c前面插入b
其中,a是c的父节点,c是已经存在的节点,b是新节点

17、a.appendChild(b):在a末尾追加b

a是父节点,b是a的子节点, c是子节点

元素节点的相关api
1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

区别:HTMLCollection 是动态集合,NodeList 是静态集合。

2、createElement():根据标签名创建新元素

3、id:读写属性,可以读取或设置元素的id值

4、className:读写属性,可以读取或设置元素的class值

5、classList:读取标签的类名集合(类数组结构)

add():为元素新增类名,如果类名已存在不会重复添加

remove():删除元素指定类名,如果类名不存在不会执行操作

元素的属性分为两类:
一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过.语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过.语法读取,需要通过操作方法访问。
6、setAttribute(name,value)
参数:name表示要设置的属性名,value要为属性设置的值
无返回值

7、getAttribute(name)
参数:name表示要读取的属性名
返回值:返回属性的值,如果属性不存在会返回null

8、removeAttribute(name)
参数:name表示要删除的属性名
无返回值

说明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

element拓展:
兼容:以下属性、方法在IE9以下不支持。

1、children:读取元素的所有元素子节点集合(类数组)

2、parentElement:读取元素的父元素节点

3、previousElementSibling:读取前一个元素兄弟节点

4、nextElementSibling:读取后一个元素兄弟节点

5、firstElementChild:读取第一个元素子节点
6、lastElementChild:读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除

JS之DOM操作

DOM: Document Object Model,文档对象模型;js提供了丰富的api来操作文档内容。
DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body
节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。
可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

特殊的元素节点:
1、html元素

2、body元素

3、head元素

节点操作的api(属性和方法)
1、nodeName:只读属性,可以读取节点名称

2、nodeType:只读属性,读取节点类型

3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

5、firstChild:获得节点的第一个子节点

6、lastChild:获得节点的最后一个子节点

7、querySelector():
参数:string类型,css选择器
作用:获得文档中第一个符合选择器条件的节点
兼容:在IE9以下不支持

8、 querySelectorAll(): // 获得的都是静态集合
参数:string类型,css选择器
作用:获得文档中所有符合选择器条件的节点集合(类数组结构)
兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling:获取节点的前一个兄弟节点

10、nextSibling:获取节点的后一个兄弟节点

11、parentNode:获得节点的父节点(父节点一定是元素节点)

12、removeChild():节点删除它的指定子节点
DOM操作元素:暂时不用的隐藏、一定不用的删除。

13、cloneNode():克隆一个节点
参数:boolean类型,true深克隆,false浅克隆,默认浅克隆
深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点
浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

14、a.replaceChild(b,c):用b替换c
其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

15、a.replaceWith(b):用b替换a
a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

16、a.insertBefore(b,c):在c前面插入b
其中,a是c的父节点,c是已经存在的节点,b是新节点

17、a.appendChild(b):在a末尾追加b

a是父节点,b是a的子节点, c是子节点

元素节点的相关api
1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

区别:HTMLCollection 是动态集合,NodeList 是静态集合。

2、createElement():根据标签名创建新元素

3、id:读写属性,可以读取或设置元素的id值

4、className:读写属性,可以读取或设置元素的class值

5、classList:读取标签的类名集合(类数组结构)

add():为元素新增类名,如果类名已存在不会重复添加

remove():删除元素指定类名,如果类名不存在不会执行操作

元素的属性分为两类:
一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过.语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过.语法读取,需要通过操作方法访问。
6、setAttribute(name,value)
参数:name表示要设置的属性名,value要为属性设置的值
无返回值

7、getAttribute(name)
参数:name表示要读取的属性名
返回值:返回属性的值,如果属性不存在会返回null

8、removeAttribute(name)
参数:name表示要删除的属性名
无返回值

说明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

element拓展:
兼容:以下属性、方法在IE9以下不支持。

1、children:读取元素的所有元素子节点集合(类数组)

2、parentElement:读取元素的父元素节点

3、previousElementSibling:读取前一个元素兄弟节点

4、nextElementSibling:读取后一个元素兄弟节点

5、firstElementChild:读取第一个元素子节点
6、lastElementChild:读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除

JS里面的DOM操作是什么

1、DOM:DocumentObjectModel,文档对象模型;js提供了丰富的api来操作文档内容。DOM树:html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body节点:DOM将所有的分支端都成为节点。

2、DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。

3、vardom=document.getElementById(节点id);这是通过节点的id来获取一个页面节点,也就是对节点的引用。这个时候,我们对变量dom的任何操作,实际上就是对页面节点的操作,比如说修改样式、移除节点、获取属性等等。

有没有精通HTML的大神帮帮我。问题是:使用JavaScript操作页面内容(DOM),包括添加、修改、删除?

使用JavaScript操作页面内容(DOM)可以通过以下方法实现:

1、添加: 可以使用JavaScript中的document.createElement()方法来创建新的元素,然后使用appendChild()或者insertBefore()方法将其添加到页面中。

// 创建新的段落元素

var newP = document.createElement("p");

// 为段落赋值

newP.innerHTML = "这是新添加的段落";

// 找到需要添加新元素的父元素

var parent = document.getElementById("myDiv");

// 将新元素添加到父元素中

parent.appendChild(newP);

2、修改: 可以使用JavaScript中的getElementById()或者getElementsByTagName()方法来获取页面中的元素,然后使用innerHTML或者innerText属性来修改其中的内容。

// 通过id获取需要修改的元素

var myP = document.getElementById("myP");

// 修改元素的内容

myP.innerHTML = "这是修改后的段落";

3、删除: 可以使用JavaScript中的removeChild()或者remove()方法来删除页面中的元素

// 通过id获取需要删除的元素

var myP = document.getElementById("myP");

// 找到父元素

var parent = myP.parentNode;

// 从父元素中删除该元素

parent.removeChild(myP);

这是一种简单的方法,在实际应用中,使用JavaScript对页面进行操作还需要考虑到很多的因素,如浏览器兼容性、性能优化等。最好使用一些框架或库来帮助我们简化这些操作,例如jQuery、React、Vue等。总之,通过熟练掌握JavaScript和相关框架或库的使用,可以有效地操作页面内容并实现丰富的交互效果。

乐玩宠还为您提供以下相关内容希望对您有帮助:

如何提升JavaScript的性能?

经过研究,我找到了一个更优的解决方案,即使用MutationObserver来监听DOM的变化。我们只需要在元素被添加或修改时触发我们的处理函数,这样就可以避免频繁的DOM操作,从而提高性能。具体来说,我们首先创建了一个MutationObserver实...

...问题是:使用JavaScript操作页面内容(DOM),包括添加、修改、删除...

1、添加: 可以使用JavaScript中的document.createElement()方法来创建新的元素,然后使用appendChild()或者insertBefore()方法将其添加到页面中。// 创建新的段落元素 var newP = document.createElement("p");// 为段落赋值 n...

为什么说JavaScript中的DOM操作很慢

当遍历一个集合时,length属性应被缓存在循环外部,能够避免2.1中的逻辑错误;集合存储在局部变量中,也能够提高效率。此外,当对同一个DOM元素的属性进行访问时,把这个DOM缓存成一个局部变量,是更好的选择。//只是做演示...

如何改进javascript代码的性能_javascript技巧

1.优化DOM交互DOM与我们的页面紧密相关,浏览器渲染页面也就是在渲染解析后的DOM元素,DOM操作与交互要消耗大量的时间,因为它们往往需要重新渲染整个页面或者一部分。进一步说,看似细微的一些操作也可能需要花很多时间来执行,因为DOM要处理的...

JS 核心之 DOM

由此可以看出 DOM 的主要作用 :DOM 是 JavaScript 操作网页的接口,它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(如增删改查)。 DOM 有自己的国际标准,目前通用版本是 DOM 3。Node 属性...

javascript的dom访问页面元素常见的方法有哪些

1. 通过顶层document节点获取:(1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。如今,已经出现了如...

精品JS代码大全(JavaScript开发者的必备手册)

DOM(DocumentObjectModel)是JavaScript操作网页元素的重要接口,下面是一些常见的DOM操作代码示例:1.获取元素 ```javascript varelement=document.getElementById("myElement");```这段代码通过元素的id获取了一个DOM元素。2....

常见的DOM操作有哪些

在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们。Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下...

JS操作大量Dom数据时,假死现象

1:JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器,如在IE6下一次插入大量的HTML。而如果真的弹出了“脚本运行时间过长“的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。2:这时候需要对脚本...

关于Virtual DOM 和直接 DOM 操作哪个性能更高?

对,但是 VDOM 的操作都是纯 Js 的计算,大家要明确的一点是 Js 计算(特别是在 V8 引擎的加持下)要比真实 DOM 操作开销小得多,最重要的是再也不用操心到底哪些数据有更新了,直接无脑用 VDOM 就是,开发效率提高了...

Top
3.939694s