0基础学习前段历程3 JS基础知识 输出方式

JS中常用的输出方式

所有输出方式中只有consol会输出数据的原始格式,其余输出全为字符串

1、console 控制在浏览器控制台输出的

  • console.log() 控制台输出日志

    console.log可以一次性输出多

  • console.dir() 控制台详细输出

    console.dir只能输出一个对象或者一个值的详细信息

  • console.table() 把数据以表格的形式输出在控制台

  • console.time()/timeEnd() 计算某一个程序消耗的时间

  • console.warn() 输出警告信息

2、window提示框

  • alert() 提示框

    alert弹出的内容都会默认转换为字符串(toString)
    alert是在浏览器窗口中弹出一个提示框,提示框中输出指定的信息 需要等到alert弹出框,点击确定关闭后,后面的代码才会继续执行(alert会阻碍主线程的渲染)

  • confirm() 确认取消提示框

    相对于alert来说,给用户提供了确定和取消两种选择

  • prompt() 在confirm的基础上多加一个原因

    prompt在confirm的基础上给用户提供书写操作的原因等信息

3、向页面指定容器中插入内容

  • document.write 向页面中输入内容

    把内容写入到页面中:和alert一样,写入的内容最后都会转换为字符串,然后在写入

document.write('AA')=>'AA'
document.write(10);=>'10'
document.write({
name: '珠峰'
}); //=>"[object Object]"
  • innerHTML / innerText 向页面指定容器中输入内容

    基于innerHTML/innerText向指定容器中插入内容(插入的信息也会变为字符串再插入) 基于这两种方式会把之前容器中的内容给覆盖掉,想要追加,则采用+=的方式
    innerHTML能够把标签文本进行识别和渲染
    innerText会把所有内容都当做普通的文本

let box = document.getElementById('box');
box.innerHTML = "珠峰"; //=>覆盖原始的所有内容
box.innerText = "培训";
box.innerHTML += "珠峰"; //=>在原始内容上继续增加
box.innerText += "培训";
box.innerHTML = "<strong>我是重点内容</strong>";
box.innerText = "<strong>我是重点内容</strong>";
  • value 向页面表单元素中输入内容

    给页面中的文本框赋值

let userName = document.getElementById('userName');
userName. value = "我是在JS中插入的内容";

猜你喜欢

转载自www.cnblogs.com/wrfzxyy/p/12523721.html