JavaScript 学习笔记（DOM）

最新推荐文章于 2024-07-25 09:24:40 发布

-web-PanHuang

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量384

点赞数 2

分类专栏： web前端文章标签： javascript dom 学习笔记

本文链接：https://blog.csdn.net/u014786921/article/details/54347742

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

-web-PanHuang

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习笔记（DOM）

JavaScript 学习笔记（DOM）标签（空格分隔）： javaScript DOM 学习笔记 DOM基础：文档对象模型方法说明 childNodes 测试节点 nodeType 判断节点类型再获取子节点 children 通过父节点获取子节点并且兼容 parentNode 通过子节点获取父节点 offsetParent 绝对相对定位后的父节点
复制链接

扫一扫