充实文档内容
2.平稳退化:即使缺乏必要的CSS和DOM支持的访问者依然可以访问到核心内容
创建标记 dl(datalist) dt(data title) dd(datadescript)
css-DOM
style属性 css中使用-分割单词,在js中使用驼峰法转换,示例如下:
element.style.color //grey
style = 'font-family:'Arial'' ==>element.style.fontFamily
element.style.font = 'black'//设置元素的样式
设置样式的示例:
function styleHeaderSiblings(){
if(!document.getElementByTagName) return false;
var headers = document.getElementByTagName('h1');
var elem ;
if(var i=0; i<headers.length; i++){
elem = getNextElement(headers.nextSibing);
elem.style.fontWeight = 'bold';
elem.style.fontSize = '1.2em';
/*可以使用下面的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>替换
.intro{
font-weight : 'bold';
font-size:1.2em
}
elem.setAttribute('class','intro');
*/
/*或者使用下面的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>
element.className = 'intro';
*/
}
}</code></pre>
使用JavaScript实现动画效果
使用
setTimeOut
时需要赋值一个参数 var movement = setTimeOut('funcs',1000);使用
clearTimeOut
可以取消等待执行队列中的某个函数。clearTimeOut(movement)快速移动鼠标的setTimeOut处理 在元素上设置属性接收setTimeOut的值,如
elem.movement = setTimeOut(repeat,interval)
; 在函数repeat重新执行的时候,使用if(elem.movement) clearTimeOut(elem.movement)
判断
综合实例
分别设置不同的样式 base.css layout.css typography.css(排版),然后使用base.css来包含
一段导航条设置的代码
链接添加样式
//var linktext = links[i].lastChild.nodeValue.toLowerCase();
//document.body.setAttribute('id',linktext);//通过给body设置样式,然后调用css中的样式
}
}
}
关于for点击,获取文本框的焦点的实现
关于 表单中的占位符
element.onblur = function(){
if(this.value == ''){
this.className = 'placeholder';
this.value = this.placeholder || this.getAttribute('placeholder');
}
}
element.onblur();
}
}</code></pre>
DOM补充
兄弟关系型api
prevIoUsSibling:节点的前一个节点,如果该节点是第一个节点,则为null。注意有可能拿到的节点是文本节点或注释节点,与预期的不符,要进行处理一下。
prevIoUsElementSibling:返回前一个元素节点,前一个节点必须是Element,注意IE9以下浏览器不支持。nextSibling:节点的后一个节点,如果该节点是最后一个节点,则为null。注意有可能拿到的节点是文本节点,与预期的不符,要进行处理一下。
nextElementSibling:返回后一个元素节点,后一个节点必须是Element,注意IE9以下浏览器不支持。
子关系型api
childNodes:返回一个即时的NodeList,表示元素的子节点列表,子节点可能会包含文本节点,注释节点等。
children:一个即时的HTMLCollection,子节点都是Element,IE9以下浏览器不支持。
firstNode:第一个子节点
lastNode:最后一个子节点
hasChildNodes方法:可以用来判断是否包含子节点。