JavaScript笔记（二）

最新推荐文章于 2024-04-26 16:47:03 发布

好饿呀~～～

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量963

点赞数 1

分类专栏：【前端】文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_51899357/article/details/119877086

版权

【前端】专栏收录该内容

13 篇文章 1 订阅

订阅专栏

JavaScript笔记（二）

6 文档对象

6.1 document对象简介

前两章，我们已经把window对象详细给大家探讨了一遍。这次我们介绍另一个网页中核心的对象：“document对象”。
注意：document对象是window对象中的子对象。

谈到document对象，其实我们在之前的课程中已经接触很多次了。还记得document.write()吗？这就是document对象的一个方法。

document对象除了write()方法外，跟其他对象一样，也有自身一套属性和方法。

document对象，即文档对象。顾名思义，其实很好理解，文档对象嘛，操作的都是HTML文档。为了更好理解什么叫“HTML文档”，请看一下CSS入门教程中“正常文档流”这一节。

6.1.1 document对象属性

document对象属性
属性	说明
title	文档标题，即title标签内容
URL	文档地址
fileCreateDate	文档创建日期
fileModifiedDate	文档修改时间（精确到天）
lastModified	文档修改时间（精确到秒）
fileSize	文档大小
fgColor	定义文档的前景色
bgColor	定义文档的背景色
linkColor	定义“未访问”的超链接颜色
alinkColor	定义“被激活”的超链接颜色
vlinkColor	定义“访问过”的超链接颜色

6.1.2 document对象方法

document对象方法
方法	说明
document.write()	输入文本到当前打开的文档
document.writeIn()	输入文本到当前打开的文档，并添加换行符“\n”
document.getElementById()	获取某个id值的元素
document.getElementsByName()	获取某个name值的元素，用于表单元素

上面列出了document对象常用的属性和方法，跟window对象的学习一样，在JavaScript入门阶段，站长只会给大家讲解最实用的。对于那种压根儿用不上的，我也懒得花时间去写。

6.2 训练题（1）网页动态标题

在浏览网页的时候，我们经常看到不少网页标题在闪动。这一节我们给大家讲解一个实际开发中的技巧“网页动态标题”。

实现代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //定义全局变量，用于标识
        var flag = 0;
        window.onload = function () {
            //定时器
            setInterval("titleChange()", 1000);
        }
        //定义函数
        function titleChange() {
            if(flag==0)
            {
                document.title = "★☆★绿叶学习网★☆★";
                flag = 1;
            }
            else
            {
                document.title = "☆★☆绿叶学习网☆★☆";
                flag = 0;
            }
        }
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

分析：

这个例子使用在线测试不会有效果，请大家在本地编辑器中测试预览。

这里主要使用了页面加载事件window.onload和JavaScript定时器。算法很简单，只要使用了一个全局变量作为标识。

7 DOM对象

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。

很多书籍一上来就大篇幅地展开说明DOM的历史和定义，看了老半天也不知道DOM是什么鬼。在这里，关于DOM的风流逸事就不展开了，免得初学者看得一头雾水，也浪费时间。

在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。这下大家就懂了吧。

记住，DOM就是文档对象模型，文档对象模型就是DOM，很多人在学习DOM的时候看到“文档对象模型”还不知道是什么？= =||

在DOM学习中，记住最重要的一句话：每一个元素节点都看成一个“对象”。由于元素节点也是一个对象，因此他们有自身的属性和方法。

7.1 DOM节点属性

DOM常用的节点属性
属性	说明
parentNode	获取当前节点的父节点
childNodes	获取当前节点的子节点集合
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
previousSibling	获取当前节点的前一个兄弟节点
nextSibling	获取当前节点的后一个兄弟节点
attributes	元素的属性列表

7.2 DOM节点操作

在JavaScript中，可以通过以下2种方式来选中指定元素：

7.2.1 getElementById()；

在JavaScript中，如果想通过id来选中元素，我们可以使用document对象的getElementById()方法。

getElementById()方法类似于CSS中的id选择器。

语法：

document.getElementById("元素id");

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="lvye">绿叶学习网JavaScript入门教程</div>
    <script type="text/javascript">
        var e = document.getElementById("lvye");
        e.style.color = "red";
    </script>
</body>
</html>

在浏览器预览效果如下：
分析：

这里使用document.getElementById()的方法获取id为lvye的div元素，然后把这个DOM对象赋值给变量e，然后使用DOM对象的style对象来设置div元素颜色为红色。

7.2.2 getElementsByName()；

在JavaScript中，如果想通过name来选中元素，我们可以使用document对象的getElementsByName()方法。

语法：

document.getElementsByName("表单元素name值");

说明：

getElementsByName()方法都是用于获取表单元素。

与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取。

注意，是getElementsByName()而不是getElementByName()。数组嘛，当然是复数。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input name="web" id="radio1" type="radio" value="HTML"/>
    <input name="web" id="radio2" type="radio" value="CSS"/>
    <input name="web" id="radio3" type="radio" value="JavaScript"/>
    <input name="web" id="radio4" type="radio" value="jQuery"/>
    <script type="text/javascript">
        alert(document.getElementsByName("web")[0].value);
    </script>
</body>
</html>

在浏览器预览效果如下：

分析：

getElementsByName()方法在实际开发中比较少用，大家了解一下即可。

其实可以这样说， getElementById()和getElementsByName()这两种方法是“JavaScript选择器”。

除了getElementById()和getElementsByName()这两种方法，JavaScript还提供另外一种getElementByTagName()方法，这个方法类似于CSS中的元素选择器。但是getElementByTagName()方法有个很大缺点，它会把整个页面中相同的元素都选中。用起来也比较麻烦，实际开发中很少用到。

7.2.3 创建节点

在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。

语法：

var e = document.createElement("元素名");
var txt = document.createTextNode("元素内容");
e.appendChild(t);    //把元素内容插入元素中去

7.2.4 插入节点

在JavaScript中，插入节点有2种方法：appendChild()和insertBefore()。

（1）appendChild()

在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。

语法：

obj.appendChild(new)

说明：

obj表示当前节点，new表示新节点。

（2）insertBefore()

在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。

语法：

obj.insertBefore(new,ref)

说明：

obj表示父节点；

new表示新的子节点；

ref指定一个节点，在这个节点前插入新的节点。

7.2.5 删除节点

在JavaScript中，我们可以使用removeChild()方法来删除当前节点下的某个子节点。

语法：

obj.removeChild(oldChild);

说明：

参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点。

7.2.6 复制节点

在JavaScript中，我们可以使用cloneNode()方法来实现复制节点。

语法：

obj.cloneNode(bool)

说明：

参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：

（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；

（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；

7.2.7 替换节点

在JavaScript中，我们可以使用replaceChild()方法来实现替换节点。

语法：

obj.replaceChild(new,old)

说明：

obj，表示被替换节点的父节点；

new，表示替换后的新节点；

old，需要被替换的旧节点。

7.2.8 innerHTML和innerText

在JavaScript中，我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。

innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。

7.2.9 JavaScript操作CSS样式

在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。

语法：

obj.style.属性名;

说明：

obj指的是DOM对象，也就是通过document.getElementById()等获取而来的DOM元素节点。

8 JavaScript对象

8.1 事件含义

在JavaScript中，事件往往是页面的一些动作引起的，例如当用户按下鼠标或者提交表单，甚至在页面移动鼠标时，事件都会出现。

8.2 JavaScript事件

在JavaScript中，调用事件的方式共有2种：

（1）在script标签中调用；

在script标签中调用事件，也就是在<script></script>标签内部调用事件。

语法：

var 变量名 = document.getElementById("元素id");//获取某个元素，并赋值给某个变量
变量名.事件处理器 = function()
{
   ……
}

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input id="btn" type="button" value="提交" />
    <script type="text/javascript">
        var e = document.getElementById("btn");
        e.onclick = function () {
            alert("绿叶学习网");
        }
    </script>
</body>
</html>

在浏览器预览效果如下：

分析：

当点击了按钮之后，JavaScript就会调用鼠标的点击（onclick）事件，效果如下：

很多人觉得很奇怪，document.getElementById()获取的是一个元素，能赋值给一个变量吗？答案是可以的。那问题又来了，为什么要使用document.getElementById()来获取一个元素赋值给一个变量呢？用以下代码不行么？

<script type="text/javascript">

    document.getElementById("btn").onclick = function{

        alert("绿叶学习网");

    }

</script>

其实上述代码也是可行的，只不过呢，如果不使用document.getElementById()来获取一个元素赋值给一个变量，以后我们如果要对该元素进行多次不同操作，岂不是每次都要写document.getElementById()？这样的话，代码就会显得很冗余。

（2）在元素中调用；

在元素事件中引入JS，就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数，这个属性指的是元素的“事件属性”。

举例1：（在元素事件属性中直接编写JavaScript）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input type="button" onclick="alert('绿叶学习网')" value="按钮"/>
<body>
</html>

在浏览器预览效果如下（点击按钮后的效果）：

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function alertMessage()
        {
            alert("绿叶学习网");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMessage()" value="按钮"/>
<body>
</html>

在浏览器预览效果（点击按钮后的效果）如下：

分析：

那么这两种方法有什么本质的区别呢？其实，第2种方法不需要使用getElementById()等方法来获取DOM，然后才调用函数或方法。因为它是直接在JavaScript元素中调用的。

这2种调用JavaScript事件的方式，大家刚刚开始看不理解没关系，我们只是给大家说个语法，留个印象。在接下来的章节中，我们会经常接触。

1、鼠标事件

JavaScript鼠标事件
事件	说明
onclick	鼠标单击事件
ondbclick	鼠标双击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件

三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。
3、表单事件

在JavaScript中，常用的表单事件有4种：

JavaScript鼠标事件
事件	说明
onfocus	获取焦点事件
onblur	失去焦点事件
onchange	状态改变事件
onselect	选中文本事件

4、编辑事件

在JavaScript中，常见的编辑事件有3种：

JavaScript编辑事件
方法	说明
oncopy	复制事件
oncut	剪切事件
onpaste	粘贴事件

这3个事件都对应有一个“onbeforeXXX”事件，表示发生在该事件之前的事件。

5、页面相关事件

在JavaScript中，常用的页面相关事件有3种：

JavaScript编辑事件
方法	说明
onload	页面加载事件
onresize	页面大小事件
onerror	页面或图片加载出错事件

好饿呀~～～

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript笔记（二）

JavaScript笔记（二）6 文档对象6.1 document对象简介前两章，我们已经把window对象详细给大家探讨了一遍。这次我们介绍另一个网页中核心的对象：“document对象”。注意：document对象是window对象中的子对象。谈到document对象，其实我们在之前的课程中已经接触很多次了。还记得document.write()吗？这就是document对象的一个方法。document对象除了write()方法外，跟其他对象一样，也有自身一套属性和方法。document对
复制链接

扫一扫