JavaScript操作DOM对象

最新推荐文章于 2021-06-29 16:40:10 发布

jcas

最新推荐文章于 2021-06-29 16:40:10 发布

阅读量335

点赞数

本文链接：https://blog.csdn.net/jcvvs/article/details/107079529

版权

简述DOM的分类和节点间的关系

DOM分类：DOM Core(核心），HTML-DOM和CSS-DOM
节点之间的关系：最上面的节点为根节点，相邻的节点为兄弟节点，上一个节点为父节点，下一个节点为子节点。

简述如何按层次关系访问节点

使用节点属性和element属性。
节点属性

parentNode:返回节点的父节点
childNodes:返回字节的点的集合，childNodes[i];
firstChild:返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild:返回节点的最后一个子节点
nextSibling:下一个节点
previousSibling:上一个节点
element属性
firstElementChild:返回节点的第一个子节点
lastElementChild:返回节点的最后一个子节点
nextElementSibling:下一个节点
previousElementSibling:上一个节点

用什么方法获取节点的属性值？

使用getAttribute(“属性名”);或者通过getElmentById和gerElementsByNane也可以获取；
设置属性值可以通过getAttribute(“属性名”,”属性值“）；

style属性和className在改变样式上有什么区别？
看语法：
style属性

HTML元素.style.样式属性=“值”
document.getElementById(“titles”).style.color = “#12321”;
设置 id=titles 的字体颜色为”#12321

className属性

HTML元素.className = “样式名称”
document.getElementById(“cart”).className =”cartOver”;
个人认为他们只是属性和类的区别，一个是设置样式属性值，一个是设置样式名称，都可以达到同样的效果吧。

1.DOM

DOM：Document Object Model（文档对象模型）

2.节点和节点关系

在这里插入图片描述

3.访问节点

(1)使用getElement系列方法访问指定节点

getElementById()
getElementsByName()
getElementsByTagName()

(2)根据层次关系访问节点

节点属性
在这里插入图片描述

(3)element属性

在这里插入图片描述
示例

oNext = oParent.nextElementSibling || oParent.nextSibling   
oPre = oParent.previousElementSibling || oParent.previousSibling  
oFirst = oParent. firstElementChild  ||  oParent.firstChild   
oLast = oParent.lastElementChild || oParent.lastChild

访问节点示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>访问节点</title>
    <link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
	<header>京东快报<a href="#">更多 > </a></header>
	<ul>
    <li><a href="#">志玲姐姐：墨镜300减30</a></li>
    <li><a href="#">京东无锡馆正式启动</a></li>
    <li><a href="#">99元抢平板！品牌配件199-100</a></li>
    <li><a href="#">节能领跑京东先行</a></li>
    <li><a href="#">高洁丝实力撩货，领券五折</a></li>
</ul>
</section>
<script>
    var obj=document.getElementById("news");
    //var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
    //var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
    //var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
    var str=obj.children[1].children[2].children[0].innerHTML;
    var str=obj.children[1].children[2].children[0].firstChild.noceName;
    alert(str);
</script>
</body>
</html>

body,ul,li,div,section,header{margin: 0;padding: 0;}
ul,li{list-style: none;}
body{
    font-family: "微软雅黑";
    font-size: 12px;
    line-height: 28px;
}
#news{
    border: 1px solid #cccccc;
    width: 280px;
    overflow: hidden;
    margin: 5px auto 0 auto;
}
#news header{
    border-bottom: 1px solid #cccccc;
    font-size: 16px;
    line-height: 40px;
    padding-left:15px;
    color: #666666;
    font-weight: bold;
}
#news header a{text-decoration: none; color: #666666; float: right; padding-right: 10px; font-size: 12px;}
#news ul li{padding-left: 10px;}
#news ul li a{color: #686868; text-decoration: none; display: inline-block;}
#news ul li a:hover{color: #b02f4a;}

4.节点信息

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
在这里插入图片描述

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>节点信息</title>
</head>
<body>
<ul id="nodeList">
	<li>nodeName</li>
	<li>nodeValue</li>
	<li>nodeType</li>
</ul>
<p></p>
<script>
    var nodes=document.getElementById("nodeList");
    var type1=nodes.firstChild.nodeType;
    var type2=nodes.firstChild.firstChild.nodeType;
    var name1=nodes.firstChild.firstChild.nodeName;
    var str=nodes.firstChild.firstChild.nodeValue;
    var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
    document.getElementById("nodeList").nextSibling.innerHTML=con;
</script>
</body>
</html>

5.操作节点

(1)操作节点的属性

语法：
getAttribute("属性名")
setAttribute("属性名","属性值")

(2)创建和插入节点

创建节点

在这里插入图片描述

(3)删除和替换节点

在这里插入图片描述

示例：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>删除和替换节点</title>
    <style>
        *{padding: 0; margin: 0; font-size: 12px;}
        ul,li{list-style: none;}
        li{float: left; text-align: center; width: 140px;}
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="images/f01.jpg" id="first">
            <p>
            	<input type="button" value="删除我吧" onclick="del()">
            </p>
        </li>
        <li>
            <img src="images/f02.jpg" id="second">
            <p>
            	<input type="button" value="换换我吧" onclick="rep()">
            </p>
        </li>
    </ul>
<script>
    function del(){
        var delNode=document.getElementById("first");
        delNode.parentNode.removeChild(delNode);
    }
    function rep(){
        var oldNode=document.getElementById("second");
        var newNode=document.createElement("img");
        newNode.setAttribute("src","images/f03.jpg");
        oldNode.parentNode.replaceChild(newNode,oldNode);
    }
</script>
</body>
</html>

(4)操作节点样式

改变样式的属性

style属性

语法：HTML元素.style.样式属性＝"值"
示例：
document.getElementById(“titles”).style.color="#ff0000";
document.getElementById(“titles”).style.fontSize="25px ";

className属性

语法：HTML元素.className=“样式名称”
示例：
function over(){
document.getElementById(“cart”).className=“cartOver”;
document.getElementById(“cartList”).className=“cartListOver”;
}
function out(){
document.getElementById(“cart”).className=“cartOut”;
document.getElementById(“cartList”).className=“cartListOut”;
}

(5)获取元素的样式

语法：HTML元素.style.样式属性;
示例：alert(document.getElementById(“cartList”).display);

语法：document.defaultView.getComputedStyle(元素,null).属性;
示例：var cartList=document.getElementById(“cartList”);
alert(document.defaultView.getComputedStyle(cartList,null).display);

语法：HTML元素. currentStyle.样式属性;
示例：alert(document.getElementById(“cartList”).currentStyle.display);
currentStyle:兼容IE浏览器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择你喜欢的书</title>
    <style>
        *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
        div{padding: 5px; text-align: center;
        }
        div span{display: block;}
    </style>
</head>
<body>
<p>选择你喜欢的书：
	<input type="radio" name="book" onclick="book()">我和狗狗一起活下来
	<input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>
<div><img src="" alt="" id="image" onclick="img()"><span></span></div>
<script>
    function book(){
        var ele=document.getElementsByName("book");
        var img=document.getElementById("image");
        if(ele[0].checked){
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            img.nextSibling.innerHTML="我和狗狗一起活下来";
        }
        else if(ele[1].checked){
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.nextSibling.innerHTML="灰霾来了怎么办";
        }
    }
    function img(){
        var alt=document.getElementById("image").getAttribute("alt");
        alert("图片的alt："+alt)
    }
</script>
</body>
</html>

6.HTML中元素属性

(1)元素属性应用

在这里插入图片描述

7.元素属性应用

语法:
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;

jcas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作DOM对象

简述DOM的分类和节点间的关系DOM分类：DOM Core(核心），HTML-DOM和CSS-DOM节点之间的关系：最上面的节点为根节点，相邻的节点为兄弟节点，上一个节点为父节点，下一个节点为子节点。简述如何按层次关系访问节点使用节点属性和element属性。节点属性parentNode:返回节点的父节点childNodes:返回字节的点的集合，childNodes[i];firstChild:返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点lastChild:返回节点的
复制链接

扫一扫