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.遍历一个节点几个设置有段元素的样式
在事件发生时设置有关元素的样式
