JavaScript 学习笔记(DOM)

JavaScript 学习笔记(DOM)

标签(空格分隔): javaScript DOM 学习笔记


DOM基础:文档对象模型

方法 说明
childNodes 测试节点
nodeType 判断节点类型再获取子节点
children 通过父节点获取子节点并且兼容
parentNode 通过子节点获取父节点
offsetParent 绝对相对定位后的父节点
firstchild 获取首节点(IE兼容)
firstElementChild 获取首节点(其他兼容)
lastChild 获取尾节点(IE兼容)
lastElementChild 获取尾节点(其他兼容)
获取兄弟节点 如下
lnextSibling nextElementSibling
lpreviousSibling previousElementSibling

测试兼容性的真假:alert()

封装函数:

window.onload=function(){
            var oUl=document.getElementById('ab')
        function nextSibling (ele){
            if (ele.nextElementSibling) {
                return ele.nextElementSibling
            } else{
                return ele.nextSibling
            }
        }
}

DOM操作元素属性方式:

getAttribute()方法

定义和用法

getAttribute():方法返回指定属性名的属性值。

以 Attr 对象返回属性,请使用 getAttributeNode。

语法

element.getAttribute(attributename)
参数 类型 描述
attributename 字符串值。 必需。需要获得属性值的属性名称。
返回值: 字符串 指定属性的值

setAttribute()方法

定义和用法

setAttribute() 方法添加指定的属性,并为其赋指定的值。

如果这个指定的属性已存在,则仅设置/更改值。

语法

element.setAttribute(attributename,attributevalue)
参数 类型 描述
attributename String 必需。您希望添加的属性的名称。
attributevalue String 必需。您希望添加的属性值。

removeAttribute()方法

定义和用法

removeAttribute() 方法删除指定的属性。

此方法与 removeAttributeNode() 方法的差异是:removeAttributeNode() 方法删除指定的 Attr 对象,而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值,而 removeAttributeNode() 方法返回被删除的属性,以 Attr 对象的形式。

语法

element.removeAttribute(attributename)
参数 类型 描述
attributename String 必需。您希望移除的属性的名称。

相关知识点收集

Dom节点操作常用方法

1.访问/获取节点
document.getElementById(id) 返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name); 返回带有指定名称的节点集合;注意拼写:Elements
document.getElementsByTagName(tagname); 返回带有指定标签名的对象集合;注意拼写:Elements
document.getElementsByClassName(classname); 返回带有指定class名称的对象集合 注意拼写:Elements
2.创建节点/属性
document.createElement(eName); 创建一个节点
document.createAttribute(attrName); 对某个节点创建属性
document.createTextNode(text); 创建文本节点
3.添加节点
document.insertBefore(newNode,referenceNode); 在某个节点前插入节点
parentNode.appendChild(newNode); 给某个节点添加子节点
4.复制节点
cloneNode(true,false); ‘复制某个节点参数’,’是否复制原节点的所有属性’
5.删除节点
parentNode.removeChild(node); 删除某个节点的子节点 node是要删除的节点

注意:为了保证兼容性,要判断元素节点的节点类型(nodeType),若nodeType==1,再执行删除操作。通过这个方法,就可以在 IE和 Mozilla 完成正确的操作。

nodeType 属性可返回节点的类型.最重要的节点类型是:

元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
6.修改文本节点
方法 作用
appendData(data); 将data加到文本节点后面
deleteData(start,length); 将从start处删除length个字符
insertData(start,data); 在start处插入字符,start的开始值是0;
replaceData(start,length,data); 在start处用data替换length个字符
splitData(offset); 在offset处分割文本节点
substringData(start,length); 从start处提取length个字符
7.属性操作
getAttribute(name) 通过属性名称获取某个节点属性的值
setAttribute(name,value) //修改某个节点属性的值
removeAttribute(name 删除某个属性
8.查找节点
parentObj.firstChild; 如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObj.firstChild.firstChild…..
parentObj.lastChild; 获得一个节点的最后一个节点,与firstChild一样也可以进行递归使用 parentObj.lastChild.lastChild…..
parentObj.childNodes; 获得节点的所有子节点,然后通过循环和索引找到目标节点
9.获取相邻的节点
curtNode.previousSibling; 获取已知节点的相邻的上一个节点
curtNode.nextSlbling; 获取已知节点的下一个节点
10.获取父节点
childNode.parentNode; 得到已知节点的父节点
11.替换节点
replace(newNode,oldNode);

无缝轮播图案例

整体思路:使用offsetLeft来实现移动,再通过定时器var setInterval( )调用实现轮播。
关键知识点:offsetLeft和var setInterval( )运用。

offsetLeft:定义和用法
offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
返回偏移坐标
返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有
语法
$(selector).offset()

var setInterval( )

定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法

setInterval(code,millisec[,"lang"])
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
返回值 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        //设置CSS样式布局
        *{padding: 0;margin: 0;}
            #box{
                width: 740px;
                height: 116px;
                position: relative; 
                margin: 100px;
                overflow: hidden;           
            }
            #box ul{
                position: absolute;
                left: 0px;
                top: 0px;
                clear: both;
            }
            #box ul li{
                width: 185px;
                height: 116px;
                list-style: none;
                float: left;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                //声明定义变量
                var oBox=document.getElementById('box');
                var oUl=oBox.getElementsByTagName('ul')[0];
                var aLi=oUl.getElementsByTagName('li');
                var oBtn1=document.getElementById('btn1');
                var oBtn2=document.getElementById('btn2');

                //声明每次移动的数值
                var speed=-2;

                //设置轮播图的宽度
                oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//2个ul 设置轮播图片的数量
                oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';  //计算轮播图的宽度等于li的宽度乘于li数组的长度
                //封装执行轮播操作的函数
                function move(){定义函数名,无参
                    //判断轮播图循环
                    if(oUl.offsetLeft<-oUl.offsetWidth/2){  //ul的移动的left小于负ul的宽度
                        oUl.style.left='0px';  //则ul的left为0px
                    }
                    if(oUl.offsetLeft>0){  //left等于0
                        oUl.style.left=-oUl.offsetWidth/2+'px';  //则left等于负ul的宽度除于2
                    }
                    oUl.style.left=oUl.offsetLeft+speek+'px';  //设置left移动
                }

                //使用定时器调用封装好的函数实现图片轮播
                var setInterval(move,30);

                //通过鼠标事件控制轮播方向
                oBtn1.onclick=function(){
                    speek=-2;
                }
                oBtn2.onclick=function(){
                    speek=2;
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="向左" />
        <input type="button" name="btn2" id="btn2" value="向右" />
        <div id="box">

            <ul>
                <li><img src="img/a1.jpeg"/></li>
                <li><img src="img/a2.jpeg"/></li>
                <li><img src="img/a3.jpeg"/></li>
                <li><img src="img/a4.jpeg"/></li>
            </ul>
        </div>
    </body>
</html>
;