Topic 1 : innerText(innerHTML)_HTML的转义符（和常用的符号）:
可读可写：
innnerText；
innerHTML；
这两个属性是字符串类型；
box.innerText; （属性）他是这样使用的；
innerHtml和innerText的区别为:
innerText 获取内容的时候会把标签过滤掉 通过浏览器渲染了 不会打印出来；老版本的firefox是不支持此属性的，老版本的用是textContent （现在是都支持了）；
innerHTML 获取最原始的内容不会把标签和空格换行过滤掉 就是对标签进行解析了（速度慢） 会对标签进行转义打印出来 他不是W3c标准的；
HTML中的转义符是这个&；
我们要是想网页打印一个<p>标签就是<p>(意思是less than greater than)；
空格是  &回车是br 圈c是©(
注意我们js中的转义符才是反斜杠 \ 别弄混了;
解决老版本浏览器的innerText的兼容性问题：
代码示例：
// JavaScript Document
// 写一个函数，处理innerText和textContent的兼容性问题
function getInnerText (element) {
if (typeof element.innerText === 'string') {
//说明这个浏览器支持innerText 那么我们直接返回就OK了
return element.innerText;
} else {
//说明浏览器不支持innerText
return element.textContent;
}
}
function setInnertext (element,content) {
if (typeof element.innerText === 'string') {
//说明这个浏览器支持innerText 那么我们直接返回就OK了
element.innerText = content;
} else {
//说明浏览器不支持innerText
element.textContent = content;
}
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>innerText的兼容性问题</title>
</head>
<body>
<div id="aha">aha</div>
<script src="common.js"></script>
<script>
var aha = document.getElementById('aha');
console.log(getInnerText(aha));
setInnertext(aha,'qunide');
console.log(getInnerText(aha));
</script>
</body>
</html>
Topic 1 : 文本框的操作 :
1 . 设置文本框的值 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置文本框的值</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<!----单选-------->
<input type="radio" >
<input type="button" value="按钮" id="btn">
<script>
// 1 设置文本框中的内容
var inputs = document.getElementsByTagName('input');
var i = 0, len = inputs.length;
for (; i < len; i++) {
// 获取集合中的元素
var input = inputs[i];
// 判断当前的input是否是文本框
// if (input.type === 'text') {
// input.value = i + 1;
// }
if (input.type !== 'text') {
// 不是文本框
continue;
}
input.value = i + 1;
}
// 2 点击按钮获取文本框中的内容，并用 | 分割形成一个新的字符串
</script>
</body>
</html>
2 . 获取文本框的值 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本框的一个小案例</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="radio" >
<input type="button" value="按钮" id="btn">
<script>
// 1 设置文本框中的内容
var inputs = document.getElementsByTagName('input');
var i = 0, len = inputs.length;
for (; i < len; i++) {
// 获取集合中的元素
var input = inputs[i];
// 判断当前的input是否是文本框
if (input.type !== 'text') {
// 不是文本框
continue;
}
input.value = i + 1;
}
// 2 点击按钮获取文本框中的内容，并用 | 分割形成一个新的字符串
var btn = document.getElementById('btn');
btn.onclick = function () {
// 找到所有的文本框，获取文本框的值 |
var str = '';
for (i = 0; i < len; i++) {
var input = inputs[i];
// 判断是否是文本框
if (input.type !== 'text') {
continue;
}
//注意这一句
str += input.value + '|';
}
//截取字符串的方法 从0截取到length-1
str = str.substr(0, str.length - 1);
console.log(str);
}
//注意我们这里用的是字符串 但是我们这里用字符串并不好
//因为字符串有不可变性 就是我们每次进行加的时候呢 我们老的字符串不会被删除 每次加完之后就会出现一个新的字符串这个样子的话
//就会影响性能 那么我们这里用数组的话更好一点
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本框的一个小案例</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="radio" >
<input type="button" value="按钮" id="btn">
<script>
// 1 设置文本框中的内容
var inputs = document.getElementsByTagName('input');
var i = 0, len = inputs.length;
for (; i < len; i++) {
// 获取集合中的元素
var input = inputs[i];
// 判断当前的input是否是文本框
if (input.type !== 'text') {
// 不是文本框
continue;
}
input.value = i + 1;
}
// 2 点击按钮获取文本框中的内容，并用 | 分割形成一个新的字符串
var btn = document.getElementById('btn');
btn.onclick = function () {
// 找到所有的文本框，获取文本框的值 |
// 注意这个数组的定义方法 后面是一个中括号 不是大括号这点要特别注意
var arr = [];
for (i = 0; i < len; i++) {
var input = inputs[i];
// 判断是否是文本框
if (input.type !== 'text') {
continue;
}
arr[i] = input.value ;
}
//注意这个方法 这个方法是数组的每个元素后面加上（）里面的东西 并把它输出为字符串 arr.join(separator)
//意思就是每个元素后面加一个空格并输出为字符串
var string = arr.join('|');
console.log(string);
}
</script>
</body>
</html>
03 . 禁用文本框的值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>禁用文本框</title>
</head>
<body>
<input type="text" id="txt" >
<input type="button" value="禁用" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
//
var txt = document.getElementById('txt');
// 禁用文本框
// 当标签的属性只有一个值的情况下，一般DOM元素对应的此属性的类型是布尔类型
txt.disabled = true;
}
</script>
</body>
</html>
04 . 设置下拉选项中的随机选项
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<select id="sel">
<option>请随机选择</option>
<option>回锅肉盖饭</option>
<option>宫爆鸡丁盖饭</option>
<option id="op">饺子</option>
<option>炒饼</option>
<option>地三鲜盖饭</option>
</select>
<input type="button" value="随机" id="btn">
<script src="common.js"></script>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
// 让某个option选中
// var op = document.getElementById('op');
// op.selected = true;
// 随机设置某个option被选中
// 获取所有的option
var sel = document.getElementById('sel');
var options = sel.getElementsByTagName('option');
// 1 - options.length - 1
// 生成随机的索引
var index = getRandom(1, options.length - 1);
// 根据索引获取option
options[index].selected = true;
}
</script>
</body>
</html>
// 获取min-max之间的随机整数
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
}