几个基本的DOM方法

getElementById(id)

参数是HTML网页中标签的id属性的名称,

返回得到一个唯一的对应的对象。

getElementsByTagName(tagName)

参数是标签名

返回得到一个该标签的数组

getElementsByTagName(“body”);

getElementByClassName(className)

只有较新的浏览器才支持它。通常需要用已有的DOM方法来实现它。

参数是标签的class属性名

返回得到包含该类名的所有元素的一个数组

getAttribute(属性名)

参数是属性名,

返回该属性的内容

setAttribute(属性名,设置的内容)

参数是属性名,内容

可以修改该属性的内容。

上述中的

getElementById()

getElementsByTagName()

getAttribute()

setAttribute()

这些方法都是DOM Core 的组成成分。它们并不专属于JavaScript,支持DOM的任何一种程序设计语言都可以使用它们。它们的用途也并非局限于处理网页,它们可以用来处理任何一种标记语言(如 xml)编写出来的文档。

几个属性

nodeValue

用于得到或更改一个节点的值

比如可用于获取<p>标签包含的文本值,并修改。

childNodes

获取任何一个元素的所有子元素。

返回一个数组

PS: childNodes 属性返回的数组包含所有类型的节点,而不仅仅是元素节点。事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而它们也全都包含在 childNodes 属性所返回的数组当中。

nodeType

该属性能让开发者知道自己在和哪种节点打交道。

该属性共有12种可取值,但其中仅有3种具有使用价值。

元素节点 的nodeType属性值为1

属性节点 的nodeType属性值为2

文本节点 的nodeType属性值为3

firstChild 和 lastChild

顾名思义,可获得任何一个元素的第一个子元素和最后一个子元素。

parentNode

获取某元素的父元素

更改属性内容与更改节点值得对比

function showImage(whichpic) {

	var source = whichpic.getAttribute("href");

	var place = document.getElementById("placeholder");

	place.setAttribute("src", source);

	var text = whichpic.getAttribute("title");

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

	description.firstChild.nodeValue = text;

}

关于平稳退化

补充: 很多人说现在没有太大的必要考虑这些,我因为还没深入,作保留意见。

ps: 2019-01-14/主方向为后端的话,暂时知道前端有这么个东西就行了…


“如果 Javascript 功能被禁用,将会如何?”

基于这个思考,在代码中要尽可能地考虑到用户因为各种原因 而不能使用Javascript 功能的情况。

最好在代码的开头部分做好判断,例如:

function prepareGallery(){
    if(!document.getElementsByTagName) return false;
  	if(!document.getElementById) return false;
   	if(!document.getElementById("description")) return false;
    ......
}

避免用一层又一层的花括号,这样会掩盖掉核心的代码

function prepareGallery(){
    if(document.getElementsByTagName){
  		if(document.getElementById){
   			if(document.getElementById("description")){
        		......//核心代码
    		}
    	}
    }
}使用已有的DOM方法实现某些方法

使用已有的DOM方法实现某些功能

getElementsByClassName(node, classname)

function getElementsByClassName(node, classname){
    if(node.getElementsByClassName){
        //使用现有方法
        return node.getElementsByClassName(classname);
    }else{
        var results = new Array();
        var elems = node.getElementsByTagName("*");
        for(var i = 0; i < elems.length; i++){
            if(elems[i].className.indexOf(classname) != -1){
                results[results.length] = elems[i];
            }
        }
        return results;
    }
}//end

node : DOM树中的搜索起点 classname : 搜索的类名 不适用于查找多个类名

window.onload() 绑定多个函数(事件处理)

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }  
}

编写这样的函数是为了应对页面加载完毕时执行函数过多的情况。

无论需要绑定多少个函数至window.onload,只需写如下代码

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

当然,在需要绑定的函数不是很多的情况,使用匿名函数可以方便地绑定。

window.onload = function(){
  	firstFunction();
  	secondFunction();
}

insertAfter(newElement, targetElement)

DOM本身并没有提供把一个节点插入另一个节点之后的方法。

function insertAdter(newElement, targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

动态创建标记的DOM方法

createElement()

创建一个元素

下面这条语句将创建一个p元素:

document.createElement(“p”);

appendChild()

把新创建的节点插入某个文档的节点树,作为该节点树某个节点的子节点。

parent.appendChild(child);

createTextNode()

创建一个文本节点

例如<p>标签包围的内容

insertBefore()

调用语法:parentElement.insertBefore(newElement, targetElement)

  • 新元素:你想插入的元素(newElement)
  • 目标元素:你想把新元素插到哪个元素(targetElement)之前
  • 父元素:目标元素的父元素(parentElement)

在使用过程中不必明确父元素到底是哪个,因为targetElement元素的parentNode属性就是父元素。

insertAfter()

DOM本身并没有提供这样的方法,可以用已有的方法编写一个。

如上…

用js代码操作网页中的css元素,最好不要直接改,而是通过在css文件里设置类,然后通过修改元素的类名达到操作修改css的效果。即通过更换class来更换(设置)样式。