01-JS使用过的函数 1-10

1、alert()

alert() 方法用于显示带有一条指定消息和一个 确认 按钮的警告框。

<!-- alert() 警告 提示框 -->
<div>123</div>

var dom = document.querySelector("div");
alert(dom.innerText);

以上例程会输出：

2、document.querySelector()

querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。

注意： querySelector() 方法只返回匹配指定选择器的第一个元素。如果你要返回所有匹配元素，请使用 querySelectorAll() 方法替代。

<!-- alert() 警告 提示框 -->
<div onclick="alert('我被电击了')">123</div>

var dom = document.querySelector("div");
alert(dom.innerText);

 以上例程会输出：

123

3、dom.innerText  &&  dom.innerHTML

innerHTML 和 innerText 是用来获取或设置HTML元素中的文本内容的两个常用属性。

• innerHTML 可以获取或设置元素中所有的HTML代码，包括标签。
• innerText 仅能获取或设置元素中的纯文本内容，不包括标签。

<div id="example">  
    <p>This is a 
        <b>bold</b> 
        paragraph.
    </p>
</div>

document.getElementById("example").innerHTML

 以上例程会输出：

<p>This is a <b>bold</b> paragraph.</p> 

document.getElementById("example").innerText

以上例程会输出：

This is a bold paragraph. 

通常，如果你只需要操作元素中的纯文本内容，使用 innerText 就足够了；如果你需要操作元素中的HTML代码，那么使用 innerHTML 。 

补充： textContent 和 innerText 的区别

textContent 和 innerText 都是用于操作 DOM 元素文本内容的属性。

• textContent 可以获取或设置元素的文本内容，包括所有子节点的文本内容，但是不会保留空白符号和 HTML 标签。
• innerText 也可以获取或设置元素的文本内容，但是会忽略 HTML 标签，而且会保留空白符号。

<div id="myDiv">    
    Hello World!    
    <span>Bye Bye</span>
</div>

则使用 textContent 和 innerText 的结果分别为： 

const div = document.querySelector("#myDiv");
div.textContent; // "Hello World!Bye Bye"
div.innerText; // "Hello World! Bye Bye"

 因此，如果需要操作元素的文本内容并且不需要保留 HTML 标签和空白符号，可以使用 textContent ，否则可以使用 innerText 。

4、defer和async的区别

defer 和 async 都是用于控制 JavaScript 异步执行的关键字，它们有一些区别：

1.defer 用于在 HTML 文件中标记一个脚本，表示该脚本需要在页面加载完成后执行，但是在 DOMContentLoaded 事件触发前执行。defer 会按照页面中脚本出现的顺序依次执行，如果多个脚本都使用了 defer，那么它们会按照在页面中出现的顺序依次执行。defer 通常用于优化页面加载性能，因为它可以让页面先加载完毕再执行脚本，避免脚本阻塞页面加载。

2.async 用于在 HTML 文件中标记一个脚本，表示该脚本需要在加载完成后立即执行，但是不会阻塞页面的加载。async 也会按照页面中脚本出现的顺序依次执行，但是它们的执行顺序和 DOMContentLoaded 事件触发的顺序无关。async 通常用于不需要等待其他资源加载完成就可以立即执行的脚本，比如一些统计代码、广告代码等。

3.总的来说，defer 和 async 都可以优化页面加载性能，但是它们的使用场景不同。如果脚本需要操作 DOM 元素，那么建议使用 defer，否则可以考虑使用 async。

5、document.write

document.write() 方法可向文档写入文本内容，可以是 HTML 代码。

如果在文档已完成加载后执行 document.write()，整个 HTML 页面将被覆盖。(例如点击事件触发document.write()，因为是文档加载完成后执行，所以document.write()将覆盖整个 HTML 页面)

// window可以省略不写 
// js常见的输出方式一
// document.write()  向页面中添加内容
document.write(33333);
document.write('33333');
document.write("33333");
window.document.write('<div style="color: red;">444444</div>');

 以上例程会输出：

6、confirm()

confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

如果访问者点击"确定"，此方法返回true，否则返回false。

// 两个按钮 通常和判断语句一起使用
var con = confirm('是否输入你的银行卡账号密码'); // var variable
console.log(con);

 以上例程会输出：

7、prompt()

 prompt()方法用于显示可提示用户进行输入的对话框。

这个方法返回用户输入的字符串。

// 两个按钮 一个输入框  window.prompt()  window可以省略
var account = prompt('请输入你的银行卡账号密码');
console.log('用户输入的账号', account);

 以上例程会输出：

8、 console.log

console.log() 方法用于在控制台输出信息。

该方法对于开发过程进行测试很有帮助。

9、console.error 

 console.error() 方法用于输出错误信息到控制台。

该方法对于开发过程进行测试很有帮助。

 10、console.warn

console.warn() 方法用于在控制台输出警告信息。

该方法对于开发过程进行测试很有帮助。

	// js常见的输出方式三
	console.log(1111111111); // 普通输出
	console.error('我错了  对不起'); // 错误输出
	/*
		默认
		成功
		警告
		错误

	 */ 
	console.warn('前排提示'); // 警告输出

 以上例程会输出：