js+DOM编程学习

js 文件加载时在前面会先于DOM加载,在后面时,加载不全所以用

window.onload = okFunction;
function okFunction(){
var ss = "";
......
.....
}

2.为了兼容性,检测对象是否存在时,必须去掉方法的(),不然测试的是方法的结果.

if(document.getElementById){

}

鼠标点击事件和键盘触发事件:

links[i].onclick = function () {
    return showPic(this) ? false : true;
}
links[i].onkeypress = function () {
    return showPic(this) ? false : true;
}
// === === === === => >>> >>> >>> >>> >>
links[i].onkeypress = links[i].onclick

备注:不建议使用键盘触发事件,1.onclick支持键盘回车选择,2.键盘触发会出现异常,比如: Tab 键也会触发

7.利用DOM提供的方法和属性去创建HTML元素,并把他们插入到HTML文档中.

网页的结构由标记负责创建,js函数只用来改变某些细节而不改变其底层结构

在浏览器看来,DOM节点树才是文档

在DOM看来,一个文档就是一颗节点树,如果想在节点树上添加内容(?),就必须插入新的节点,如果想添加一些标记(?)到文档,就必须插入

元素节点

XMLHttpRequest对象:

old:浏览器发起请求

new:js对象 XMLHttpRequest 发起请求

function getHttpObject() {
    if (typeof XMLHttpRequest == "undefind")
        XMLHttpRequest = function () {
            try {
                return new ActiveXobject("Msxml2.XMLHTTP.6.0")
            } catch (e) {}
            try {
                return new ActiveXobject("Msxml2.XMLHTTP.6.0")
            } catch (e) {}
            try {
                return new ActiveXobject("Msxml2.XMLHTTP.6.0")
            } catch (e) {}
            return false;

        }
    return new XMLHttpRequest()
}
var request = getHttpObject();

innerHTML,createTextNode,createElement,appendChild,insterBefore

DOM技术不仅可以用来改变网页的结构,还可以永凯更新HTML页面语速的CSS样式

9.CSS-DOM

网页构成:

结构层:html

表示层:css

行为层:js+dom

style 属性:

文档中的每个元素都是一个对象,每个对象又有着各种各样的属性,

元素在节点树上的位置信息: parentNode ,nextSibling….

元素节点本身的信息: nodeType,nodeName

style:这是一个对象,element.style.property>>>>para.style.color

background-color==backgroundColor

验证属性是否为一个对象:

var para = document.getElementById("ss");
alert(typeof para.nodeName);
alert(typeof para.style);

不仅文档里的每一个元素都是一个对象,每个元素都有一个style属性,他们也是一个对象

style 对象的属性值永远是一个字符串

window.onload = styleTest;

function styleTest() {
    var headers = document.getElementsByTagName("h1");
    var elem;
    for (var i = 0; i < headers.length; i++) {
        elem = getNextElement(headers[i].nextSibling);
        elem.style.fontWeight = "bold";
        elem.style.fontSize = "1.2em";
    }
}

function getNextElement(node) {
    if (node.nodeType == 1) {
        return node;
    }

    if (node.nextSibling) {
        return getNextElement(node.nextSibling)
    }
    return null;
}

设置h1元素下的第一个元素的新样式

首先遍历出h1元素

然后 调用headers[i].nextSibling来获取h1元素”同级后面”的节点(不是子节点),

同时将这些节点传给getNextElement,

如果节点是元素则设置样式,如果不是元素则判断是否有下一个节点,

并继续调用getNextElement,循环往复,直到寻找到第一个元素节点

然后返回这个节点 并设置样式

9.4 className 属性

与其使用DOM直接改变某个元素的样式,不如通过JavaScript代码去更新这个元素的class属性:

1.在css定义好一个class属性

2.利用js elem.className = “intro” 设置一个class属性

注意:通过className属性设置某个元素的class属性是将替换(而不是追加)改元素的元首class属性,

不过可以利用字符串拼接,在原有的class属性上追加

//element 元素

//value 新的class属性名字

function addClass(element, value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += value;
        element.className = newClassName;
    }
}

对函数进行抽象:
把一个具体的东西改进为一个较为通用的东西的过程叫做抽象

style属性的最大限制是它不支持获取外部cs设置的样式,

但你仍可以利用style属性去改变各种HTML元素的呈现效果,

这在我们无法获取难以通过外部CSS去设置的场合非常有用,

只要有可能,就应该选择更新className属性,

而不是去直接更新style对象的有关属性

1.根据元素在节点树里的位置设置他们的样式(styleHeaderSiblings函数)

2.遍历一个节点几个设置有段元素的样式

在事件发生时设置有关元素的样式