JavaScript的DOM核心操作有哪些-创新互联
本篇内容主要讲解“JavaScript的DOM核心操作有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript的DOM核心操作有哪些”吧!
站在用户的角度思考问题,与客户深入沟通,找到永定网站设计与永定网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广、申请域名、雅安服务器托管、企业邮箱。业务覆盖永定地区。文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。
W3C已经定义了一系列DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
1、对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口;
2、对于HTML,dom使html形成一颗dom树,包含文档、元素、节点。
文档:整个页面就是一个文档;
元素:页面中所有的标签都叫做元素;
节点:页面中所有的内容都是节点。文档节点(ducument对象)、元素节点(element对象)、属性节点(attribute对象)、文本节点(text对象)、注释节点(comment对象),代码间的换行也是一个节点。
我们获取过来的所有DOM元素都是一个对象(object)。
对于DOM操作,我们主要针对于 对元素的操作,主要有创建、增、删、改、查、属性操作、事件操作。
一、创建
主要包括三种:
1、document.write
特点:如果页面文档流加载完毕(即所有的代码执行完毕),再调用这句话会导致页面重绘(即重新给我们创建了一个html页面,我们之前写的东西都没了)。(很少使用)
2、innerHTML:将内容写入某个DOM节点,不会导致页面全部重绘。
3、createElement:也不会导致页面重绘。
innerHTML和createElement效率对比:
①innerHTML拼接效率测试:
执行结果如下
执行速度为1600毫秒左右
②createElement效率测试
执行结果如下
执行速度为十几秒
③innerHTML数组效率测试
执行结果如下
执行速度为个位数秒
结果分析:
执行效率:innerHTML数组效率 > createElement效率 > innerHTML拼接效率
所以创建多个元素时innerHTML效率更高(不要拼接字符串,采用数组形式拼接),结构稍微复杂麻烦一些。
createElement()创建多个元素时效率稍微低一些,但结构清晰。
二、增
主要包括两种:
1、appendChild:node.appendChild(child)是在后面追加元素
2、insertBefore:node.insertBefore(child)是添加到最前面
三、删
removeChild:node.removeChild(child)删除父节点中的一个子节点,并返回被删除的节点。
四、改
主要是修改dom元素的属性,dom元素的内容、属性,表单的值等。
1、修改元素属性:src、href、title等。可以直接修改,这些属性都是可读写的。
2、修改普通元素内容:innerText、innerHTML。(两者都是可读写的)
element.innerText:读取时,只读取标签里面的内容,不会少文字,但不会读取里边的标签、空格和换行。(非标准)
element.innerHTML:读取时,整个读取出来,包括html标签,同时保留空格和换行。(W3C标准,常用)
3、修改表单元素:value(表单里边的内容)、type(表单类型)、disabled(是否被使用)等。
4、修改元素样式:style、className。可以直接通过style修改属性,如果需要修改的属性较多或者为了方便操作,建议修改className。
五、查
主要获取查询dom的元素
1、DOM提供的API方法:getEementById、getElementsByTagName等古老的方法。
2、H5提供的新方法:querySelector、querySelectorAll 。(提倡)
3、利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)。(提倡)
六、属性操作
主要针对自定义属性
1、setAttribute:设置dom的属性值。 element.setAttribute('属性', '值'); 主要针对自定义属性
2、getAttribute:获取dom的属性值
获取dom的属性值有两种方法:element.属性 和 element.getAttribute(‘属性’)
区别:
element.属性 获取的是内置属性值(元素本身自带的属性);
element.getAttribute(‘属性’)主要获取的是自定义的属性(我们自己添加的属性)。
3、removeAttribute:移除属性。 removeAttribute(‘属性’)
七、事件操作
给元素注册事件,采取:事件源.事件类型=事件处理程序
onclick:鼠标左键单击事件。
onmouseover:鼠标经过时触发。
onmouseout:鼠标离开时触发。
onfocus:获得鼠标焦点触发。
onblur: 失去鼠标焦点触发。
dblclick: 鼠标左键双击事件。
onmousemove:鼠标移动触发。
onmousedown:按下鼠标键时触发。
onmouseup:释放按下的鼠标键时触发。
到此,相信大家对“JavaScript的DOM核心操作有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
本文题目:JavaScript的DOM核心操作有哪些-创新互联
网站路径:http://scyanting.com/article/dpjgii.html