JavaScript的DOM编程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript的DOM编程相关的知识,希望对你有一定的参考价值。

DOM(文档对象模型), 与语言无关, 用于操作XML(在Web中)和html(在浏览器在)文档的应用程序接口。访问DOM次数越多, 速度越慢, 费用也就越高。

innerHTML属性: ducument.getElementById(‘here‘).innerHTML()

保准的DOM方法: ducument.createElement()、 ducument。createTextNode()

节点克隆: ducument.cloneNode()

获取集合: ducument.getElementByName()

      ducument.getElementByClassName()

      ducument.getElementByTagName()

这个集合对象是一个类似数组的列表, 没有数组的push和slice方法, 但提供数组中的length属性,访问集合元素时使用局部变量

页面中的所有img元素: ducument.images

页面中所有a元素: ducument.links

页面中所有表单元素: ducument.forms

页面中第一个表单的所有字段: ducument.forms[0].elements

获取第一个元素: ducument.getElementById(‘div‘).firstChild

获取相邻元素: ducument.getElementById(‘div‘).firstChild.nextSibling

获取元素集合: ducument.getElementById(‘div‘).childNodes

API只返回元素节点: child 代替 childNodes

          childElementCount 代替 childNodes.length

            firstElementChild 代替 firstChild

          lastElementChild 代替 lastChild

          nextElementChild 代替 nextSibling

          previousElementSibling 代替 previousSibling

选择器API: ducument.querySelectorAll(‘#menu a‘) <=> ducument.getElementById(‘menu‘).getElementByTagName(‘a‘)

class为warning和notice的元素: ducument.querySelectorAll(‘div.warning, div.notice‘)

           <=>  var errs=[];

              divs = doucument.getElementsByTagName(‘div‘);

              className = ‘‘ ;

              for(var i=0; len = divs.length; i<len; i++) {

                className = divs[i].className;

                if (className == ‘notice‘ || className == ‘warning‘) {

                  errs.push(divs[i]);

                }

              }

                        

以上是关于JavaScript的DOM编程的主要内容,如果未能解决你的问题,请参考以下文章

读书高程3-JavaScript简介

JavaScript DOM编程艺术简略笔记

JavaScript之dom操作

网站前端_JavaScript-DOM编程.0001.JavaScriptDom基础核心?

JavaScript DOM编程艺术-学习笔记(第十二章)

前端学习系列之JavaScript DOM