04JS输出输入及调试方式

1、alert()

alert('输出内容')用于弹出一个警告框，确保用户可以看到某些信息。

2、console.log()

浏览器调试控制台运行js

console.log('输出内容')用于在浏览器的控制台中输出内容。

console.log('Hello world')
console.log(123)
console.log(true)
var greeting = 'Hello'
console.log(greeting)
console.log([1, 2, 3, 4]) //数组
console.log({ a: 1, b: 2 }) //对象
//使用表格输出对象
console.table({ a: 1, b: 2 });
//报错
console.error('this is some error');
// 清空
//console.clear();
//警告
console.warn('this is a warning');

3、innerHTML和innerText

获取内容或给获取到的元素设置⼀些内容

document.getElementById('id名').innerHTML='内容'

从以上例子可以看出：

• innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
• innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
• outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）
• outerText设置或获取标签自身及其所包含的文本信息（包括自身）
  
  innerText和outerText在获取的时候是相同效果，但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本。

innerHTML所有浏览器都支持。

区别：

• innerHTML、outerHTML在设置标签之间的内容时，包含的HTML会被解析；而innerText、outerText则不会；
• innerHTML、innerText仅设置标签之间的文本，而outerHTML、outerText设置包含自身标签在内文本

4、document.write()

document.write('输出内容')用于在HTML文档页面中输出内容。在js中使用得比较少。

效果如下：

可以看出，document.write()会解析内容中含有的HTML标签。
给“重写”div设置一个单击事件如下：

单击“重写”div效果如下：

可以看到，输出内容会清空原有的html再⽣成⼀个新的html。document.write()重写⽂档是发⽣在⽂档加载完成后，对页面进行一些动作，触发事件等。

5、prompt()

弹出一个输入框，提示用户输入内容，返回用户输入的内容或缺省值或null。

var name = prompt("请输入姓名：",'匿名');
alert(name);

第1个参数设置提示信息，第2个参数用于设置弹出的输入框中的默认文本。