《使用jQuery快速高效制作网页交互特效》Lesson3 JavaScript操作DOM对象

最新推荐文章于 2021-01-18 22:49:48 发布

oJustinBieberk

最新推荐文章于 2021-01-18 22:49:48 发布

阅读量1.8k

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/weixin_40716583/article/details/80010344

版权

总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM操作

操作dom时通常分为三类：

1.DOM Core（核心）

DOM Core不是JavaScript的专属品，任何一种支持DOM的编程语言都可以使用它，它的用途不仅限于处理一种使用标记语言编写出来的文档。（getElenmentById()、getElementsTagName()等都是DOM Core的组成部分。）

2.HTML-DOM

使用JavaScript和DOM为HTML文档编写脚本时，有许多专属的HTML-DOM属性，HTML-DOM出现的比DOM Core更早，它提供了一些更简单的标记来描述各种HTML元素的属性，如 document、forms，获取表单对象。

3.CSS-DOM

CSS-DOM是针对CSS的操作，在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，即CSS属性，通过改变style对象的各种属性，可以使用网页呈现出各种不同的效果，如 element.style.color="red" ,设置文本为红色。

节点和节点关系

DOM是以树状结构组成的HTML文档，根据DOM概念，我们可以知道，HTML文档每个标签或元素都是一个节点，规定如下：

→整个文档是一个文档点。

→每个HTML标签是一个元素节点。

→包含在HTML元素中的文本是文本节点。

→每个HTML属性是一个属性节点。

→注释属于注释节点。

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
<a href="https://www.baidu.com">我的链接</a>
<h1>我的标题</h1>
</body>
</html>

示例1的节点关系如下↓

访问节点

使用DOM Core访问HTML文档的节点主要有两种方式：

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

与getElementById()、getElementsByName()和getElementSByTagName()方法略有不同。

→getElementById()：返回id属性查找的第一个对象的引用。

→getElementsByName()：返回按带有指定名称name查找的对象的集合，犹豫一个文档中可能会有多个同名节点（如复选框、单选按钮），因此返回的是元素数组。

→getElementSByTagName()：返回带有指定标签名 TagName 查找的对象的集合，由于一个文档中可能会有多个同类型的标签节点（如图片组、文本输入框），因此返回元素数组。

2.根据层次关系访问节点

节点属性
属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次关系访问节点</title>
</head>
<body>
<script type="text/javascript">
    function show() {
        var uu = document.getElementById("ul1");
        var ll = uu.firstChild.lastChild.firstChild.innerHTML;
        alert(ll);
    }
</script>
<ul id="ul1"><li>admin<span><em>fff</em></span></li></ul>
<input type="button" value="点击" οnclick="show()">
</body>
</html>

结果：

element属性
属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastELementChild	返回节点的最后一个子节点
nextELementSibling	下一个节点
previousElementSibling	上一个节点

节点信息

节点是DOM层次结构中任何类型的对象的通用名称，每个节点都拥有包含着关于节点某些信息的属性，属性如下：

→nodeName（节点名称）。

→nodeValue（节点值）。

→nodeType（节点类型）。

节点类型
节点类型	NodeType值
元素 element	1
属性 attr	2
文本 text	3
注释 comments	8
文档 document	9

示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul>
<p id="p1"></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("p1").innerHTML=con;
</script>
</body>
</html>

结果：

操作节点

操作节点的属性

HTML DOM提供了获取及改变节点属性值得标准方法：

→getAttribute("属性名")：用来获取属性的值。

→setAttribute("属性名","属性值")：用来设置属性的值。

示例4：

<body>
<script type="text/javascript">
    function book() {
        var nn = document.getElementsByName("book");
        var img = document.getElementById("img");
        if (nn[0].checked) {
            img.setAttribute("src", "img/1.jpg");
            img.setAttribute("alt", "滑稽");
            img.nextSibling.innerHTML = "滑稽";
        } else if (nn[1].checked) {
            img.setAttribute("src", "img/2.jpg");
            img.setAttribute("alt", "兴奋");
            img.nextSibling.innerHTML = "兴奋";
        }
    }

</script>

<p>选择你喜欢的表情：
    <input type="radio" name="book" οnclick="book()">滑稽
    <input type="radio" name="book" οnclick="book()">兴奋
</p>
<div><img src="" alt="" id="img" οnclick=""></div>

</body>

创建和插入节点

创建节点
名称	描述
createElement（tagName）	创建一个标签名为tagName的新元素节点
A.appendChild(b)	把B节点追加至A节点的末尾
insertBefour(A,B)	把A节点插入B节点之前
cloneNode(deep)	复制某个指定的节点

示例5：

<body>
<script>
    function found() {
        var divs = document.getElementsByTagName("div")[0];
        var imgs = document.createElement("img");
        imgs.setAttribute("src", "img/1.jpg");
        divs.appendChild(imgs);
    }
    function copy() {
        var divs = document.getElementsByTagName("div")[0];
        var copys = divs.firstChild.cloneNode(false);
        divs.insertBefore(copys, divs.firstChild);
    }
</script>

<div id="divs"></div>

<input type="button" value="创建" οnclick="found()">
<input type="button" value="复制" οnclick="copy()">
</body>

删除和替换节点

删除和替换节点的方法
名称	描述
removeChild(node)	删除指定的节点
replaceChild(newNode,oldNode)	用其他的节点替换指定的节点

示例6：

<body>
<script>
    function del() {
        var delnode = document.getElementById("divs");
        delnode.parentNode.removeChild(delnode);
    }
    function modify() {
        var oldnode = document.getElementById("imgs");
        var newnode = document.createElement("img");
        newnode.setAttribute("src", "img/2.jpg");
        oldnode.parentNode.replaceChild(newnode, oldnode);
    }
</script>

<div id="divs"></div>
<input type="button" value="删除" οnclick="del()">
<img src="img/3.jpg" id="imgs">
<p><input type="button" value="替换" οnclick="modify()"></p>

</body>

操作节点样式

1.style属性

语法：

HTML 元素.style.样式属性 = "值";

style对象的常用属性↓

类别	属性	描述
Background（背景）	backgroundColor	设置元素的背景颜色
	backgroundImage	设置元素的背景图像
	backgroundRepeat	设置是否及如何重复背景图像
Text（文本）	fontSize	设置元素的字体大小
	fontWeight	设置字体的粗细
	textAlign	排列文本
	textDecoration	设置文本的修饰
	font	设置同一行字体的属性
	color	设置文本的颜色
Padding（边距）	padding	设置元素的填充
Padding（边距）	paddingTop paddingBottom paddingLeft paddiRight	设置元素的上、下、左、右填充
border(边框)	border	设置四个边框的属性
border(边框)	borderTop borderBottom borderLeft borderRight	设置的上、下、左、右边框的属性

常用事件
名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

示例7：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/shopping.css">
</head>
<section id="shopping">
    <div id="cart" οnmοuseοver="over()" οnmοuseοut="out()">我的购物车<span>1</span></div>
    <div id="cartList">
        <h2>最新加入的商品</h2>
        <ul>
            <li><img src="images/makeup.jpg"></li>
            <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
            <li>¥558.00×1<br/>删除</li>
        </ul>
        <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
    </div>
</section>
<script>
    document.getElementById("cartList").style.display="none";
    function over() {
        document.getElementById("cart").style.backgroundColor="#fff";
        document.getElementById("cart").style.zIndex="100";
        document.getElementById("cart").style.borderBottom="none";
        document.getElementById("cartList").style.display="block";
        document.getElementById("cartList").style.position="relative";
        document.getElementById("cartList").style.top="-1px";
    }
    function out() {
        document.getElementById("cart").style.backgroundColor="#f9f9f9";
        document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
        document.getElementById("cartList").style.display="none";
    }

/*    function over() {
        document.getElementById("cart").className="cartOver";
        document.getElementById("cartList").className="cartListOver";
    }
    function  out() {
        document.getElementById("cart").className="cartOut";
        document.getElementById("cartList").className="cartListOut";
    }*/
</script>
</body>

2.className属性

语法：

HTML 元素.className="样式名称"

示例8：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/shopping.css">
</head>
<section id="shopping">
    <div id="cart" οnmοuseοver="over()" οnmοuseοut="out()">我的购物车<span>1</span></div>
    <div id="cartList">
        <h2>最新加入的商品</h2>
        <ul>
            <li><img src="images/makeup.jpg"></li>
            <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
            <li>¥558.00×1<br/>删除</li>
        </ul>
        <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
    </div>
</section>
<script>
/*    document.getElementById("cartList").style.display="none";*/
/*    function over() {
        document.getElementById("cart").style.backgroundColor="#fff";
        document.getElementById("cart").style.zIndex="100";
        document.getElementById("cart").style.borderBottom="none";
        document.getElementById("cartList").style.display="block";
        document.getElementById("cartList").style.position="relative";
        document.getElementById("cartList").style.top="-1px";
    }
    function out() {
        document.getElementById("cart").style.backgroundColor="#f9f9f9";
        document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
        document.getElementById("cartList").style.display="none";
    }*/

    function over() {
        document.getElementById("cart").className="cartOver";
        document.getElementById("cartList").className="cartListOver";
    }
    function  out() {
        document.getElementById("cart").className="cartOut";
        document.getElementById("cartList").className="cartListOut";
    }
</script>
</body>

获取元素的样式

语法：

HTML 元素.sytle.样式属性;

HTML 元素.currentStyle.样式属性;

document.defaultView.getComputedStyle(元素,null).属性;

oJustinBieberk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录