【javaScript】JavaScript与DOM

最新推荐文章于 2022-06-05 20:25:00 发布

LP_bin

最新推荐文章于 2022-06-05 20:25:00 发布

阅读量140

点赞数

文章标签： Web JavaScript DOM

本文链接：https://blog.csdn.net/weixin_40849588/article/details/115100856

版权

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

DOM（Document Object Model，文档对象模型）是一个通过和JavaScript进行内容交互的API。Javascript和DOM一般经常作为一个整体，因为Javascript通常都是用来进行DOM操作和交互的。

在这里插入图片描述
关于DOM，有些知识需要注意：

window对象作为全局对象，也就是说你可以通过window来访问全局对象。
1. 属性在对象下面以变量的形式存放，在页面上创建的所有全局对象都会变成window对象的属性。
2. 方法在对象下面以函数的形式存放，因为左右的函数都存放在window对象下面，所以他们也可以称为方法。
DOM为web文档创建带有层级的结果，这些层级是通过node节点组成，这里有几种DOM node类型，最重要的是Element, Text, Document。
1. Element节点在页面里展示的是一个元素，所以如果你有段落元素()，你可以通过这个DOM节点来访问。
2. Text节点在页面里展示的所有文本相关的元素，所以如果你的段落有文本在里面的话，你可以直接通过DOM的Text节点来访问这个文本
3. Document节点代表是整个文档，它是DOM的根节点。
每个引擎对DOM标准的实现有一些轻微的不同。例如，Firefox浏览器使用的Gecko引擎有着很好的实现（尽管没有完全遵守W3C规范），但IE浏览器使用的Trident引擎的实现却不完整而且还有bug，给开发人言带来了很多问题。

Script元素

当你在网站页面上使用JavaScript的时候，需要使用SCRIPT元素：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">  
        <head>  
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
                <title>JavaScript!</title>  
        </head>  
        <body>        
            <script type="text/javascript">  
            // <![CDATA[  

            // ]]>  
</script>        
        </body>  
    </html>

上述代码，严格来说SCRIPT的TYPE属性应该设置为application/javascript，但是由于IE不支持这个，所以平时我们不得不写成text/javascript或者直接去掉type。另外你也可以看到在SCRIPT元素里的注释行// ，浏览器就不会再解析成XHTML标签了。

Defer属性

任何在SCRIPT元素里声明的代码在页面加载的时候都会运行，唯一一个例外是给SCRIPT元素加上一个defer属性。defer属性告诉浏览器加载完HTML文档以后再执行JS代码，但这个属性只能在IE下使用。
连接外部脚本
如果你想了解外部脚本，只需要简单地在SCRIPT上使用SRC属性就行了，使用单独的JS文件的好处是可以缓存，而且也不需要担心CDATA方面的问题：

<script type="text/javascript" src="my-script.js"></script>

JavaScript必备基础

在继续DOM之前，我们来复习一下JavaScript的核心必备知识，如果你还不了解，也没关系，我们在这一章节将稍微花点时间来回顾一下。

JavaScript有几种数据类型：Number, String, Boolean, Object, Undefined and Null。

单行注释使用双斜杠//，双斜杠后面的所有文字都会被注释掉，多行注意使用/和/括住。

Number
在JavaScript里所有的Number都是浮点型的，当声明一个数字变量的时候，记得不要使用任何引号。

	// 注：使用var类声明变量
	var leftSide = 100;  
	var topSide = 50;  
	var areaOfRectangle = leftSide * topSide; // = 5000

String
JavaScript里声明字符串特别简单，和其它语言一样，在JS里使用单引号或双引号都可以。

ar firstPart = 'Hello';  
var secondPart = 'World!';  
var allOfIt = firstPart + ' ' + secondPart; // Hello World! 
// +符合是字符连接符。也用于数字相加

Boolean
布尔类型用于条件判断，布尔类型是只有2个值：true和false。任何使用逻辑操作符的比较都会返回布尔值。

5 === (3 + 2); // = true 
// 你也可以将布尔值赋给一个变量
var veryTired = true;
// 这样使用
if (veryTired) {
     
	// 执行代码 
}

===也是比较操作符，不仅比较数值，还比较类型。

Function


// 使用function操作符来声明新函数 
function myFunctionName(arg1, arg2) {
     
 // 函数代码
}

// 你也可以声明匿名函数 
function (arg1, arg2) {
     
    // Function code goes here. 
}

// 运行函数很简单，直接在函数名称后面加上小括号就可以了
// 或者也可以带上参数
myFunctionName(); // 无参
myFunctionName('foo', 'bar'); // 有参数

// 也可以使用自调用 

(function () {
     
    // 这里自调用函数
})(

最低0.47元/天解锁文章

LP_bin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【javaScript】JavaScript与DOM

DOM:文档对象模型（Document Object Model）DOM（Document Object Model，文档对象模型）是一个通过和JavaScript进行内容交互的API。Javascript和DOM一般经常作为一个整体，因为Javascript通常都是用来进行DOM操作和交互的。关于DOM，有些知识需要注意：window对象作为全局对象，也就是说你可以通过window来访问全局对象。属性在对象下面以变量的形式存放，在页面上创建的所有全局对象都会变成window对象的属性。方
复制链接

扫一扫