JavaScript学习笔记(DOM脚本)

最新推荐文章于 2024-07-11 18:00:32 发布

weixin_30326745

最新推荐文章于 2024-07-11 18:00:32 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moonfish1994/p/10222420.html

版权

本篇讲述的是文档对象模型（DOM）。

JavaScript在Web开发中的主要作用是用于与用户交互，而DOM便是我们实现这些功能的基础。DOM是W3C提供的一种标准，它为开发人员提供了一种方式以表达网页中的所有元素。我们可以通过JavaScript修改页面元素相应的DOM属性，便可以对页面中的元素进行相关操作。

有一点儿比较值得称赞的是，因为DOM只表示页面中的内容，所以它并不受浏览器影响，因此我们编写的代码可以在任何兼容DOM的浏览器中运行，这是它一大亮点。

下面我们来通过一个小例子来加深对DOM的认识：

<!DOCTYPE html>
<html lang = "en">
<head>
</head>
<body>
<h1>h1</h1>
	<p>Hello World!</p>
</body>
</html>

上面代码是一个相当简单的html页面，我们可以通过DOM的树形表达结构来表示上述的页面，表示如下：

可以从上图，html页面中的每个元素，都可以在DOM结构中作为一个节点，从而构成一个树形的结构。当然，因为页面比较简单，所以看结构看上去很简单，当今后我们编写复杂页面的时候，就可以发现其对应的DOM树是相当的复杂。

下面我们来看看DOM的核心对象：

因为DOM中包含的对象及其对应的方法和属性实在是太多了，所以本篇只简单地描述一下Node，Element，和Document三个对象及其部分的方法和属性。通过这三个对象，我们就可以创建，修改和导航树形结构了。

===================================================================================================================================

1.Document对象及其方法：

Document对象可以在页面上完成查找，创建和删除元素的功能，这些功能对于我们而言十分的重要。

查找一个或多个元素：

下面通过一个小例子来验证这些方法。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>just a test</title>
 </head>
 <body bgcolor="white">
	<p id="p1">paragraph 1</p>
	<p id="p2">paragraph 2</p>
	<p id="p3">paragraph 3</p>
	<h1 class="test1" >heading1</h1>
	<h1 class="test2" id="h2">heading2</h1>
 </body>
</html>

通过浏览器打开该界面，并在控制台输入如下代码：

var p1 = document.getElementById("p1");
var p = document.getElementsByTagName("p");
var h1 = document.querySelector(".test1,h1");
var pp = document.querySelectorAll("p");
console.log(p1.innerHTML);
console.log("p的length为："+p.length+" 第二项item[1]内容为： "+p.item(1).innerHTML);
console.log("pp的length为： "+pp.length+" pp的第二项为："+pp.item(2).innerHTML);
console.log(h1);

可以得到如下打印：

从控制台输出可以看出通过四种方法，我们都可以成功取出页面中的元素，并查看元素的内容。

创建元素和文本：

document对象除了查找功能外还提供了一系列创建元素和文本的方法。

下面通过一个小例子来验证这些方法：

<!DOCTYPE html>
<html lang = "en">
<head>
	<title>just a test</title>
</head>
<body>
	<script>
	</script>
</body>
</html>

创建一个空网页，在浏览器中打开，并执行下述代码：

var text = document.createTextNode("heading1");         //创建一个文本节点
var heading1 = document.createElement("h1");//创建一个h1元素
heading1.appendChild(text);//向h1元素中添加文本节点
document.body.appendChild(heading1);//向body中添加h1元素

执行上述代码后，可以得到如下效果：

从页面中可以看出，我们通过JavaScript动态的改变了页面的显示，是不是开始有了点儿小小的成就感呢~

此时可以查看document对象的documentElement属性，执行完后会返回该元素对象的引用，也可以说是Element对象，同时我们可以通过调用Element的tagName属性，来查看元素的标记。

===================================================================================================================================

2.Element对象及其方法：
Element对象相对本次介绍的另外两个对象而言要相对简单，其方法和属性都比较少。

下面通过一个小例子来验证以上方法和属性。

首先创建如下静态页面：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>just a test</title>
 </head>
 <body bgcolor="white">
	<p id="p1">paragraph 1</p>
 </body>
</html>

然后再打开控制台在其中输入如下代码：

//获取最外层的元素
var container = document.documentElement;
//获取id为p1的元素 
var pElement = document.getElementById("p1");
//输出最外层元素的标记名称
console.log(container.tagName);
//将id为p1的元素的align属性设为居中
pElement.setAttribute("align","center");
//打印此时id为p1的元素的align的值
console.log(pElement.getAttribute("align"));
//删除id为p1的元素的align属性的值
pElement.removeAttribute("align");

执行上述代码可以看到如下效果：

3.Node对象及其方法：
前面我们提到了DOM模型是一个树形结构，Node对象就是树形结构中的每一个节点。通过它我们可以完成对DOM的导航。

下面来通过一个小例子来验证这些方法：

首先创建一个静态页面，代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>just a test</title>
 </head>
 <body bgcolor="white">
	<h1 id="heading1">this is heading</h1>
	<p id="p1">this is paragraph</p>
 </body>
</html>

然后在控制台输入如下代码：

获取根元素节点,即<html/>元素
var root = document.documentElement;
//输出根节点下是否有子节点
console.log("root节点下是否有子节点："+root.hasChildNodes());
//输出根节点下子节点的数量
console.log("root节点下子节点的数量："+root.childElementCount);
//因为我们知道html的结构，所以知道根节点下的第一个子节点是<head/>
var headElement= root.firstChild;
//因为我们知道html的结构，所以知道根节点下的第二个子节点是<body>
var bodyElement = root.lastChild;
//输出两个子节点的名称
console.log("headElement的名称为："+headElement.tagName+" bodyElement的名称为："+bodyElement.tagName);
//通过id获得h1元素节点
var h1Element = document.getElementById("heading1");
//声明一个pElement变量来容纳p元素节点，这里要注意的是元素与元素之间包含空白的文本节点，所以需要判断节点的类型，如果不是元素节点，需进行两次下一个节点的查
//找
var pElement;
if(h1Element.nextSibling.nodeType == 1){
    pElement = h1Element.nextSibling;
}else{
    pElement = h1Element.nextSibling.nextSibling;
}
console.log("h1Element的名称为："+h1Element.tagName+" pElement的名称为："+pElement.tagName);
//创建一个文本节点
var newText = document.createTextNode("this is new paragraph");
//创建一个p元素节点
var newPElement = document.createElement("p");
//将文本节点加入p元素节点中
newPElement.appendChild(newText);
//将创建的p元素节点插入到body节点的子节点列表下的最后
document.body.appendChild(newPElement);

执性上述代码前，页面如下：

执行上述代码后，页面如下：

===================================================================================================================================

学习了上面的3个对象后，我们已经可以自行导航一个页面，获取其中的节点，及相应的属性。除了这样，我们还可以通过修改元素的一个style属性或者class属性来实现对界面的修改。

下面用两个小例子来展示其用法：

Example1：

创建如下静态界面

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>just a test</title>
  <style>
	#divAdvert{
		font: 12pt arial;
	}
        .new-style{
    font-style: italic;
text-decoration: underline;
}
  </style>
 </head>
 <body>
	<div id="divAdvert">
		just a test!
	</div>
 </body>
</html>

在控制台输入如下代码：

//根据id获取到div块
var divAdvert = document.getElementById("divAdvert");
//通过style属性将颜色设为红色
divAdvert.style.color = "red";
//通过修改class属性，来使用新的css样式
divAdvert.className = "new-style";

执行上述代码后可以看到如下界面：

Example2：

第二个例子相对而言比较有意思，是模拟网页中的那种左右移动的广告，代码如下：

<!DOCTYPE html>

<html lang="en">
<head>
    <title>just a test</title>
    <style>
//定义的一个样式
        #divAdvert {
            position: absolute;
            font: 12px Arial;
            top: 4px;
            left: 0px;
        }
    </style>
</head>
<body>
    //定义的一个div块，其中包含一段文字
    <div id="divAdvert">
        Here is an advertisement.
    </div>

    <script>
     //声明一个变量来控制文字移动方向是否需要改变，默认为false，false时向右移动，true时向左移动
        var switchDirection = false;

        function doAnimation() {
    //通过id获取div块
            var divAdvert = document.getElementById("divAdvert");
            //获取当前div块距离最左侧的偏移量
    var currentLeft = divAdvert.offsetLeft;
            //声明一哥变量用于容纳当前距离最左侧的偏移量
    var newLocation;

            //判断当前移动方向的值为true或false，false时，将当前的偏移量+2，然后赋值给newLocation，true是-2；
            if (!switchDirection) {
                newLocation = currentLeft + 2;

                if (currentLeft >= 400) {
                    switchDirection = true;
                }
            } else {
                newLocation = currentLeft - 2;

                if (currentLeft <= 0) {
                    switchDirection = false;
                }
            }
    //通过style属性设置div块距离左侧的偏移量为newLocation的值
            divAdvert.style.left = newLocation + "px";
        }
  //启动循环定时器，每隔10毫秒执行一次上述方法
        setInterval(doAnimation, 10);
    </script>

</body>
</html>

执行完上述代码可以看到如下效果：

以上为本篇内容。

转载于:https://www.cnblogs.com/moonfish1994/p/10222420.html

weixin_30326745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记(DOM脚本)

本篇讲述的是文档对象模型（DOM）。JavaScript在Web开发中的主要作用是用于与用户交互，而DOM便是我们实现这些功能的基础。DOM是W3C提供的一种标准，它为开发人员提供了一种方式以表达网页中的所有元素。我们可以通过JavaScript修改页面元素相应的DOM属性，便可以对页面中的元素进行相关操作。有一点儿比较值得称赞的是，因为DOM只表示页面中的内容，所以它并不受浏览器影响，因...
复制链接

扫一扫