DOM对象和内置对象-JavaScript入门基础（008）

最新推荐文章于 2024-03-30 14:31:19 发布

虾米大王

最新推荐文章于 2024-03-30 14:31:19 发布

阅读量306

点赞数

分类专栏： JavaScript 文章标签： javascript jquery css css3 html

本文链接：https://blog.csdn.net/modern358/article/details/112254150

版权

JavaScript 专栏收录该内容

329 篇文章 0 订阅

订阅专栏

函数设置默认参数：

有时候，我们需要函数的参数带默认值，是为了简化输入。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <script>        function sayHello(name = "everybody") {            alert("hello," + name);        }
        sayHello('xiao ming');        sayHello();</script></body></html>

上述代码中，我们的函数sayHello是根据传入的参数姓名，打招呼的，当含有默认值时，没有传入参数，就按照默认值处理。这里注意一点，带有默认值参数，需要放置在参数列表的最右侧，否则会报错的。

DOM对象与内置对象：

在window对象的方法中，有一些是专门用于处理和用户交互的方法。

alert方法：

语法：

window.alert("");

使用alert（）向用户弹出一个信息提示框，此提示框是模态的。模态对话框表示脚本暂时停止运行，页面与用户交互，直到用户关闭对话框后，脚本继续执行。alert（）方法是没有返回值的。

confirm方法：

语法：

window.confirm();

confirm对话框，也是一个模态对话框，但是它与alter不同之处在于，alert对话框只有一个ok按钮，而confirm对话框有两个按钮ok和cancel，主要作用是用于判断脚本的执行方向的。

单击ok按钮，返回布尔值true，单击cancel按钮，返回布尔值false。

var isDel = confirm("是否删除此记录!");

可以根据isDel的值判断，是否进行删除操作。

prompt方法：

语法：

window.prompt("");

prompt（）是打开一个模态对话框，用于用户输入信息的。

prompt（）方法有两个参数，参数1是提示的文字，参数2是表示输入框中显示的默认值。

var answer = prompt("你叫什么名字？","虾米大王");

如果用户输入了信息，单击ok按钮，返回值就是用户输入的字符串；

如果用户没有输入信息，单击ok按钮，返回值就是参数2的默认值，当然如果你设置了参数2；

如果用户直接关闭了对话框，返回值就是null。

根据id选择元素：

从HTML页面中选择具有某个特定id的元素，我们需要使用document的getElementById()方法，它的返回值就是一个DOM对象。

语法：

window.document.getElementById('');

假设web页面包含一个div元素：

<div id="d1">  ......</div

在脚本中，我们访问这个div元素：

var myDiv = document.getElementById("d1");

再这里需要注意一点，我们在页面中给元素命名id时，一定要保持id值唯一。

innerHTML属性：

对于很多DOM对象来说，innerHTML属性是一个比较常用的属性，可以读取和设置元素内部的HTML内容。

假设HTML页面中包含元素：

<div id="div1">  <p>这里是一些原始文本。</p></div>

我们可以利用innerHTML属性，获取内容。

var myDivContents = document.getElementById("div1").innerHTML;

此时变量myDivContents内含有的就是，“<p>这里是一些原始文本</p>”。

还可以通过innerHTML属性，重新设定内容。

document.getElementById("div1").innerHTML = "<p>这是替换的内容。</p>";

完整代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div id="div1">        <p>这里是一些原始文本。</p>    </div>    <script>        var myDivContents = document.getElementById("div1").innerHTML;        window.alert(myDivContents);
        document.getElementById("div1").innerHTML = "<p>这是替换的内容。</p>";</script></body></html>