JavaScript

2024-07-16 16:19| 来源: 网络整理| 查看: 265

Topic 1 : innerText(innerHTML)_HTML的转义符（和常用的符号）:

可读可写：

innnerText；

innerHTML；

这两个属性是字符串类型；

box.innerText; （属性）他是这样使用的；

innerHtml和innerText的区别为:

innerText 获取内容的时候会把标签过滤掉通过浏览器渲染了不会打印出来；老版本的firefox是不支持此属性的，老版本的用是textContent （现在是都支持了）；

innerHTML 获取最原始的内容不会把标签和空格换行过滤掉就是对标签进行解析了（速度慢）会对标签进行转义打印出来他不是W3c标准的；

HTML中的转义符是这个&；

我们要是想网页打印一个

标签就是p;(意思是less than greater than)；

注意我们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; } } innerText的兼容性问题 aha var aha = document.getElementById('aha'); console.log(getInnerText(aha)); setInnertext(aha,'qunide'); console.log(getInnerText(aha)); Topic 1 : 文本框的操作 :

1 . 设置文本框的值：

设置文本框的值 // 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 点击按钮获取文本框中的内容，并用 | 分割形成一个新的字符串

2 . 获取文本框的值：

文本框的一个小案例 // 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); } //注意我们这里用的是字符串但是我们这里用字符串并不好 //因为字符串有不可变性就是我们每次进行加的时候呢我们老的字符串不会被删除每次加完之后就会出现一个新的字符串这个样子的话 //就会影响性能那么我们这里用数组的话更好一点

文本框的一个小案例 // 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); }

03 . 禁用文本框的值

禁用文本框 var btn = document.getElementById('btn'); btn.onclick = function () { // var txt = document.getElementById('txt'); // 禁用文本框 // 当标签的属性只有一个值的情况下，一般DOM元素对应的此属性的类型是布尔类型 txt.disabled = true; }

04 . 设置下拉选项中的随机选项

无标题文档请随机选择回锅肉盖饭宫爆鸡丁盖饭饺子炒饼地三鲜盖饭 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; } // 获取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 }

【本文地址】

公司简介

联系我们