一:Document Object Model 在DOM模型中,每一个元素(element)、属性(attribute)、文本(text)都可以看做是一个对象,javascript可以访问独立访问这些对象,用一些方法可以找到和改变这些对象。 DOM是这样规定的,每个HTML的标签是一个元素节点,包含在元素中的文本是文本节点,每一个HTML属性是一个属性节点。 二:访问DOM的节点 A:通过ID获取元素 var target = document.getElementById("berenger"); B:通过Tag Name获取元素 var listItems = document.getElementsByTagName("li"); listItems是一个类似数组的对象,可以用listItems.Length来获得对象的长度。 C:通过Class Name获取元素 大多数情况下使用className来获取元素比tag name要简便,但是dom没有提供相应的函数,所以我们要创建一个方法。 可以分解为以下三步: 1:搜索文档中的所有元素。 2:对每一个元素,把所属的class和所要找寻的class做比较。 3:如果相同,添加到list中。 js代码如下: Var Core = {}; Core.getElementsByClass = function(theClass) { var elementArray = []; //IE中不支持getElementsByTagName("*"),用document.All。 if (document.all) { elementArray = document.all; } else { elementArray = document.getElementsByTagName("*"); } var matchedArray = []; var pattern = new RegExp("(^| )" + theClass + "( |$)"); for (var i = 0; i < elementArray.length; i++) { if (pattern.test(elementArray[i].className)) { matchedArray[matchedArray.length] = elementArray[i]; } }
return matchedArray; }; 三:操纵DOM树 parentNode:父元素。 childNodes:子元素。 firstChild:第一个节点。 lastChild:最后一个节点。 nextSibling:下一个同级节点。 previousSinbling:上一个同级节点。
四:属性 A:获得属性值(getAttribute) <a id="koko" href = "http://www.163.com">163</a> //js var koko = document.getElementById("koko"); var kokoHref = koko.getAttribute("href"); 注:getAttribute不能用document对象调用。 B:设置属性值(setAttribute) setAttribute不但可以修改现有属性的值,而且可以添加新的属性,类似getAttribute,它不能通过document调用,只能通过元素节点来调用。需要传递两个参数: obiect.setAttribute(attribute,value) //例子 var koko = document.GetElementById("koko"); koko.setAttribute("title","web site in china"); |
javascript与dom编程(一)
最新推荐文章于 2024-08-14 09:04:24 发布