23w《javascript Dom编程艺术》学习笔记(下)

前端之家收集整理的这篇文章主要介绍了23w《javascript Dom编程艺术》学习笔记(下)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

充实文档内容

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方法:可以用来判断是否包含子节点。

猜你在找的程序笔记相关文章