DOM对象和内置对象-JavaScript入门基础(008)

函数设置默认参数:

 

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

 

 

<!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>

 

 

下节我们接着分享关于DOM对象的内容。

 

 

 


 

 

 

 

图片

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持,我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值