html编码
< <
>
" "
’ &apos
& &
空格  
html实体编码：&#十进制
urlcode编码：%十六进制
UTF-8编码规则：字母一个字节，汉字通常三个字节。只有很生僻的字才4~6个字节，unicode编码成utf-8是便于节约空间
unicode编码中：
0~127表示一个字节
128~2047表示两个字节
2048~65535表示三个字节
如果只有一个字节则其最高二进制位为0；如果是多字节，其第一个字节从最高位开始，连续的二进制位值为1的个数决定了其编码的位数，其余各字节均以10开头。UTF-8最多可用到6个字节。
utf-8转码步骤
查询unicode码点
判断几个字节
根据utf-8的规范把unicode码转换成2进制由后向前依次补充，不够补0
1字节 0xxxxxxx
2字节 110xxxxx 10xxxxxx
3字节 1110xxxx 10xxxxxx 10xxxxxx
4字节 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
5字节 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
6字节 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
弹窗
console.log显示在窗口下（不弹窗）
alert弹窗，（只有确定）里面的只能是数字，否则需要加双引号
confirm弹窗，（确定取消）
prompt弹窗，（有输入框）输入为ture，不输入为false
img的js伪协议
svg/onload
php/pythonjs灵活的动态语言
java安全的静态语言
sql注入的延时注入：
三元运算符：先判断表达式1的值是否为真，如果是真的话执行表达式2；如果是假的话执行表达式3
转义：’
while循环必须得结束条件防止死循环
a标签host与hostname
host加porn，hostname不加
对称加密：一把密钥进行加密解密，速率高但不安全
非对称加密：速率低但安全
私钥加密公钥解密 号称 签名
公钥加密私钥解密 号称 加密
21FTP 22ssh 23Telnet 25SMTP 53dns
67、68DHCP#为什么dhcp两个端口客户端属向服务器向67端口（bootpc）广播回应请求，68端口（bootps）广播请求配置
80HTTP 110pop3 443https 445smb永恒之蓝 1433sql server 1521Oracle 3306mysql 3389远程登陆端口 6379redis 7001weblogic
状态码
200OK：请求已正常处理
301Moved Permanently永久性重定向 资源的uri已更新，你也更新下你的书签引用吧。
302Found临时性重定向 资源的URI已临时定位到其他位置了，姑且算你已经知道了这个情况了。
304Not Modified资源已找到，但未符合条件请求。
307Temporary Redirect临时重定向。与302有相同的含义
308Http Status Code永久重定向，且禁止改变http方法
400Bad Request服务器端无法理解客户端发送的请求，请求报文中可能存在语法错误。
401Unauthorized该状态码表示发送的请求需要有通过HTTP认证（BASIC认证，DIGEST认证）的认证信息。
403Forbidden不允许访问那个资源。该状态码表明对请求资源的访问被服务器拒绝了。（权限，未授权IP等）
404Not Found：服务器上没有请求的资源。路径错误等
500Internal Server Error：貌似内部资源出故障了。该状态码表明服务器端在执行请求时发生了错误。也有可能是web应用存在bug或某些临时故障。
501Http Status Code 服务器不支持的请求方法
503Service Unavailable：抱歉，我现在正在忙着。该状态码表明服务器暂时处于超负载或正在停机维护，现在无法处理请求。
ttl：time to live（生存时间）防环，90%判断对方设备系统
64 linux 128 windos
访问网站的过程：
检查本地本地dns缓存看缓存中是否有解析数据（ipconfig -displaydns）
查看本地host文件（本地域名缓存）
本机固定的dns服务器（路由器）找13台根根域服务器
根域找到com域，com找到baidu域名，给你返回结果，返回给你主机
和百度服务器建立tcp可靠连接，三次握手，keep-alive、request、response最终通过浏览器实现解析页面
dns迭代与递归的区别：
递归是主机向本地 DNS 服务器发出请求，然后等待
迭代是本地服务器向 DNS 服务器请求
语句
JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。
语句（statement）是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。
var a = 1 + 3;
这条语句先用var命令，声明了变量a，然后将1 + 3的运算结果赋值给变量a。
1 + 3叫做表达式（expression），指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。
语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。
var a = 1 + 3 ; var b = ‘abc’;
分号前面可以没有任何内容，JavaScript 引擎将其视为空语句。
;;;
上面的代码就表示3个空语句。
表达式不需要分号结尾。一旦在表达式后面添加分号，则 JavaScript 引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。
1 + 3;
‘abc’;
上面两行语句只是单纯地产生一个值，并没有任何实际的意义。
变量
概念
变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。
var a = 1;
上面的代码先声明变量a，然后在变量a与数值1之间建立引用关系，称为将数值1“赋值”给变量a。以后，引用变量名a就会得到数值1。最前面的var，是变量声明命令。它表示通知解释引擎，要创建一个变量a。
注意，JavaScript 的变量名区分大小写，A和a是两个不同的变量。
变量的声明和赋值，是分开的两个步骤，上面的代码将它们合在了一起，实际的步骤是下面这样。
var a;
a = 1;
如果只是声明变量而没有赋值，则该变量的值是undefined。undefined是一个特殊的值，表示“无定义”。
var a;
a // undefined
如果变量赋值的时候，忘了写var命令，这条语句也是有效的。
var a = 1;
// 基本等同
a = 1;
但是，不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量，所以建议总是使用var命令声明变量。
如果一个变量没有声明就直接使用，JavaScript 会报错，告诉你变量未定义。
x
// ReferenceError: x is not defined
上面代码直接使用变量x，系统就报错，告诉你变量x没有声明。
可以在同一条var命令中声明多个变量。
var a, b;
JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。
var a = 1;
a = ‘hello’;
php/python/js 灵活的动态语言
（java/c++静态语言）
上面代码中，变量a起先被赋值为一个数值，后来又被重新赋值为一个字符串。第二次赋值的时候，因为变量a已经存在，所以不需要使用var命令。
如果使用var重新声明一个已经存在的变量，是无效的。
var x = 1;
var x;
x // 1
上面代码中，变量x声明了两次，第二次声明是无效的。
但是，如果第二次声明的时候还进行了赋值，则会覆盖掉前面的值。
var x = 1;
var x = 2;
// 等同于
var x = 1;
var x;
x = 2;
变量提升
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
var a;
console.log(a);
a = 1
上面代码首先使用console.log方法，在控制台（console）显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码。
var a;
console.log(a);
a = 1;
最后的结果是显示undefined，表示变量a已声明，但还未赋值。
标识符最好语义化
标识符
注释
区块
条件语句
JavaScript 提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。
if 结构
if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示“真”，false表示“伪”。
if (布尔值)
语句;
// 或者
if (布尔值) 语句;
上面是if结构的基本形式。需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中，表示对表达式求值。如果表达式的求值结果为true，就执行紧跟在后面的语句；如果结果为false，则跳过紧跟在后面的语句。
if (m === 3)
m = m + 1;
上面代码表示，只有在m等于3时，才会将其值加上1。
这种写法要求条件表达式后面只能有一个语句。如果想执行多个语句，必须在if的条件判断之后，加上大括号，表示代码块（多个语句合并成一个语句）。
if (m === 3) {
m += 1;
}
建议总是在if语句中使用大括号，因为这样方便插入语句。
注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（=）和相等运算符（）。尤其是赋值表达式不具有比较作用。
var x = 1;
var y = 2;
if (x === y) {
console.log(x);
}
// “2”
上面代码的原意是，当x等于y的时候，才执行相关语句。但是，不小心将严格相等运算符写成赋值表达式，结果变成了将y赋值给变量x，再判断变量x的值（等于2）的布尔值（结果为true）。
这种错误可以正常生成一个布尔值，因而不会报错。为了避免这种情况，有些开发者习惯将常量写在运算符的左边，这样的话，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。
if (x = 2) { // 不报错
if (2 = x) { // 报错
至于为什么优先采用“严格相等运算符”（=），而不是“相等运算符”（），请参考《运算符》章节。
if…else 结构
if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。
if (m === 3) {
// 满足条件时，执行的语句
} else {
// 不满足条件时，执行的语句
}
上面代码判断变量m是否等于3，如果等于就执行if代码块，否则执行else代码块。
对同一个变量进行多次判断时，多个if…else语句可以连写在一起。
if (m === 0) {
// …
} else if (m === 1) {
// …
} else if (m === 2) {
// …
} else {
// …
}
else代码块总是与离自己最近的那个if语句配对。
var m = 1;
var n = 2;
if (m !== 1)
if (n === 2) console.log(‘hello’);
else console.log(‘world’);
上面代码不会有任何输出，else代码块不会得到执行，因为它跟着的是最近的那个if语句，相当于下面这样。
if (m !== 1) {
if (n === 2) {
console.log(‘hello’);
} else {
console.log(‘world’);
}
}
如果想让else代码块跟随最上面的那个if语句，就要改变大括号的位置。
if (m !== 1) {
if (n === 2) {
console.log(‘hello’);
}
} else {
console.log(‘world’);
}
// world
switch 结构
多个if…else连在一起使用的时候，可以转为使用更方便的switch结构。
switch (fruit) {
case “banana”:
// …
break;
case “apple”:
// …
break;
default:
// …
}
上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。
var x = 2;
switch (x) {
case 1:
console.log(‘x 等于1’);
case 2:
console.log(‘x 等于2’);
default:
console.log(‘x 等于其他值’);
}
// x等于1
// x等于2
// x等于其他值
上面代码中，case代码块之中没有break语句，导致不会跳出switch结构，而会一直执行下去。正确的写法是像下面这样。
switch (x) {
case 1:
console.log(‘x 等于1’);
break;
case 2:
console.log(‘x 等于2’);
break;
default:
console.log(‘x 等于其他值’);
}
switch语句部分和case语句部分，都可以使用表达式。
switch (1 + 3) {
case 2 + 2:
f();
break;
default:
neverHappens();
}
上面代码的default部分，是永远不会执行到的。
需要注意的是，switch语句后面的表达式，与case语句后面的表示式比较运行结果时，采用的是严格相等运算符（=），而不是相等运算符（），这意味着比较时不会发生类型转换。
var x = 1;
switch (x) {
case true:
console.log(‘x 发生类型转换’);
break;
default:
console.log(‘x 没有发生类型转换’);
}
// x 没有发生类型转换
上面代码中，由于变量x没有发生类型转换，所以不会执行case true的情况。这表明，switch语句内部采用的是“严格相等运算符”，详细解释请参考《运算符》一节。
三元运算符 ?:
先判断表达式1的值是否为真，如果是真的话执行表达式2；如果是假的话执行表达式3
JavaScript 还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。
(条件) ? 表达式1 : 表达式2
上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。
var even = (n % 2 === 0) ? true : false;
上面代码中，如果n可以被2整除，则even等于true，否则等于false。它等同于下面的形式。
var even;
if (n % 2 === 0) {
even = true;
} else {
even = false;
}
这个三元运算符可以被视为if…else…的简写形式，因此可以用于多种场合。
var myVar;
console.log(
myVar ?
‘myVar has a value’ :
‘myVar does not have a value’
)
// myVar does not have a value
上面代码利用三元运算符，输出相应的提示。
var msg = ‘数字’ + n + ‘是’ + (n % 2 === 0 ? ‘偶数’ : ‘奇数’);
上面代码利用三元运算符，在字符串之中插入不同的值。
循环语句
Document 节点
概述
document节点对象代表整个文档，每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。
document对象有不同的办法可以获取。
正常的网页，直接使用
document或window.document。
iframe
框架里面的网页，使用iframe节点的contentDocument属性。
Ajax 操作返回的文档，使用
XMLHttpRequest对象的responseXML属性。
内部节点的
ownerDocument属性。
document对象继承了EventTarget接口和Node接口，并且混入（mixin）了ParentNode接口。这意味着，这些接口的方法都可以在document对象上调用。除此之外，document对象还有很多自己的属性和方法。
属性
快捷方式属性
以下属性是指向文档内部的某个节点的快捷方式。
（1）document.defaultView
document.defaultView属性返回document对象所属的window对象。如果当前文档不属于window对象，该属性返回null。
document.defaultView === window // true
（2）document.doctype
对于 HTML 文档来说，document对象一般有两个子节点。第一个子节点是document.doctype，指向节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成。如果网页没有声明 DTD，该属性返回null。
var doctype = document.doctype;
doctype // “”
doctype.name // “html”
document.firstChild通常就返回这个节点。
（3）document.documentElement
document.documentElement属性返回当前文档的根元素节点（root）。它通常是document节点的第二个子节点，紧跟在document.doctype节点后面。HTML网页的该属性，一般是节点。
（4）document.body，document.head
document.body属性指向节点，document.head属性指向节点。
这两个属性总是存在的，如果网页源码里面省略了或，浏览器会自动创建。另外，这两个属性是可写的，如果改写它们的值，相当于移除所有子节点。
（5）document.scrollingElement
document.scrollingElement属性返回文档的滚动元素。也就是说，当文档整体滚动时，到底是哪个元素在滚动。
标准模式下，这个属性返回的文档的根元素document.documentElement（即）。兼容（quirk）模式下，返回的是元素，如果该元素不存在，返回null。
// 页面滚动到浏览器顶部
document.scrollingElement.scrollTop = 0;
（6）document.activeElement
document.activeElement属性返回获得当前焦点（focus）的 DOM 元素。通常，这个属性返回的是、、等表单元素，如果当前没有焦点元素，返回元素或null。
（7）document.fullscreenElement
document.fullscreenElement属性返回当前以全屏状态展示的 DOM 元素。如果不是全屏状态，该属性返回null。
if (document.fullscreenElement.nodeName == ‘VIDEO’) {
console.log(‘全屏播放视频’);
}
上面代码中，通过document.fullscreenElement可以知道元素有没有处在全屏状态，从而判断用户行为。
节点集合属性
以下属性返回一个HTMLCollection实例，表示文档内部特定元素的集合。这些集合都是动态的，原节点有任何变化，立刻会反映在集合中。
（1）document.links
document.links属性返回当前文档所有设定了href属性的及节点。
// 打印文档所有的链接
var links = document.links;
for(var i = 0; i < links.length; i++) {
console.log(links[i]);
}
（2）document.forms
document.forms属性返回所有表单节点。
var selectForm = document.forms[0];
上面代码获取文档第一个表单。
除了使用位置序号，id属性和name属性也可以用来引用表单。
/* HTML 代码如下
document.replaceChild(
doc.documentElement,
document.documentElement
);
上面代码中，第一步生成一个新的 HTML 文档doc，然后用它的根元素document.documentElement替换掉document.documentElement。这会使得当前文档的内容全部消失，变成hello world。
方法
document.open()，document.close()
document.open方法清除当前文档所有内容，使得文档处于可写状态，供document.write方法写入内容。
document.close方法用来关闭document.open()打开的文档。
document.open();
document.write(‘hello world’);
document.close();
document.write()，document.writeln()
document.write方法用于向当前文档写入内容。
在网页的首次渲染阶段，只要页面没有关闭写入（即没有执行document.close()），document.write写入的内容就会追加在已有内容的后面。
// 页面显示“helloworld”
document.open();
document.write(‘hello’);
document.write(‘world’);
document.close();
注意，document.write会当作 HTML 代码解析，不会转义。
document.write(‘
hello world
’);上面代码中，document.write会将
当作 HTML 标签解释。
如果页面已经解析完成（DOMContentLoaded事件发生之后），再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。
document.addEventListener(‘DOMContentLoaded’, function (event) {
document.write(‘
Hello World!
’);});
// 等同于
document.addEventListener(‘DOMContentLoaded’, function (event) {
document.open();
document.write(‘
Hello World!
’);document.close();
});
如果在页面渲染过程中调用write方法，并不会自动调用open方法。（可以理解成，open方法已调用，但close方法还未调用。） hello 在浏览器打开上面网页，将会显示hello world。 document.write是 JavaScript 语言标准化之前就存在的方法，现在完全有更符合标准的方法向文档写入内容（比如对innerHTML属性赋值）。所以，除了某些特殊情况，应该尽量避免使用document.write这个方法。 document.writeln方法与write方法完全一致，除了会在输出内容的尾部添加换行符。 document.write(1); document.write(2); // 12 document.writeln(1); document.writeln(2); // 1 // 2 // 注意，writeln方法添加的是 ASCII 码的换行符，渲染成 HTML 网页时不起作用，即在网页上显示不出换行。网页上的换行，必须显式写入
。 document.querySelector()，document.querySelectorAll() document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。 var el1 = document.querySelector('.myclass'); var el2 = document.querySelector('#myParent > [ng-click]'); document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。 elementList = document.querySelectorAll('.myclass'); 这两个方法的参数，可以是逗号分隔的多个 CSS 选择器，返回匹配其中一个选择器的元素节点，这与 CSS 选择器的规则是一致的。 var matches = document.querySelectorAll('div.note, div.alert'); 上面代码返回class属性是note或alert的div元素。 这两个方法都支持复杂的 CSS 选择器。 // 选中 data-foo-bar 属性等于 someval 的元素 document.querySelectorAll('[data-foo-bar="someval"]');
// 选中 myForm 表单中所有不通过验证的元素
document.querySelectorAll(‘#myForm :invalid’);
// 选中div元素，那些 class 含 ignore 的除外
document.querySelectorAll(‘DIV:not(.ignore)’);
// 同时选中 div，a，script 三类元素
document.querySelectorAll(‘DIV, A, SCRIPT’);
但是，它们不支持 CSS 伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。
如果querySelectorAll方法的参数是字符串*，则会返回文档中的所有元素节点。另外，querySelectorAll的返回结果不是动态集合，不会实时反映元素节点的变化。
最后，这两个方法除了定义在document对象上，还定义在元素节点上，即在元素节点上也可以调用。
document.getElementsByTagName()
document.getElementsByTagName()方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。
var paras = document.getElementsByTagName(‘p’);
paras instanceof HTMLCollection // true
上面代码返回当前文档的所有p元素节点。
HTML 标签名是大小写不敏感的，因此getElementsByTagName()方法的参数也是大小写不敏感的。另外，返回结果中，各个成员的顺序就是它们在文档中出现的顺序。
如果传入*，就可以返回文档中所有 HTML 元素。
var allElements = document.getElementsByTagName(‘*’);
注意，元素节点本身也定义了getElementsByTagName方法，返回该元素的后代元素中符合条件的元素。也就是说，这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
var firstPara = document.getElementsByTagName(‘p’)[0];
var spans = firstPara.getElementsByTagName(‘span’);
上面代码选中第一个p元素内部的所有span元素。
document.getElementsByClassName()
document.getElementsByClassName()方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。
var elements = document.getElementsByClassName(names);
由于class是保留字，所以 JavaScript 一律使用className表示 CSS 的class。
参数可以是多个class，它们之间使用空格分隔。
var elements = document.getElementsByClassName(‘foo bar’);
上面代码返回同时具有foo和bar两个class的元素，foo和bar的顺序不重要。
注意，正常模式下，CSS 的class是大小写敏感的。（quirks mode下，大小写不敏感。）
与getElementsByTagName()方法一样，getElementsByClassName()方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
// 非document对象上调用
var elements = rootElement.getElementsByClassName(names);
document.getElementsByName()
document.getElementsByName()方法用于选择拥有name属性的 HTML 元素（比如、、、、和等），返回一个类似数组的的对象（NodeList实例），因为name属性相同的元素可能不止一个。
// 表单为
var forms = document.getElementsByName(‘x’);
forms[0].tagName // “FORM”
document.getElementById()
document.getElementById()方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。
var elem = document.getElementById(‘para1’);
注意，该方法的参数是大小写敏感的。比如，如果某个节点的id属性是main，那么document.getElementById(‘Main’)将返回null。
document.getElementById()方法与document.querySelector()方法都能获取元素节点，不同之处是document.querySelector()方法的参数使用 CSS 选择器语法，document.getElementById()方法的参数是元素的id属性。
document.getElementById(‘myElement’)
document.querySelector(‘#myElement’)
上面代码中，两个方法都能选中id为myElement的元素，但是document.getElementById()比document.querySelector()效率高得多。
另外，这个方法只能在document对象上使用，不能在其他元素节点上使用。
document.elementFromPoint()，document.elementsFromPoint()
document.elementFromPoint()方法返回位于页面指定位置最上层的元素节点。
var element = document.elementFromPoint(50, 50);
上面代码选中在(50, 50)这个坐标位置的最上层的那个 HTML 元素。
elementFromPoint方法的两个参数，依次是相对于当前视口左上角的横坐标和纵坐标，单位是像素。如果位于该位置的 HTML 元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值或超过视口大小），则返回null。
document.elementsFromPoint()返回一个数组，成员是位于指定坐标（相对于视口）的所有元素。
var elements = document.elementsFromPoint(x, y);
document.createElement()
document.createElement方法用来生成元素节点，并返回该节点。
var newDiv = document.createElement(‘div’);
createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号（即<和>）会报错。
document.createElement(‘
// DOMException: The tag name provided (‘
注意，document.createElement的参数可以是自定义的标签名。
document.createElement(‘foo’);
document.createTextNode()
document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容。
var newDiv = document.createElement(‘div’);
var newContent = document.createTextNode(‘Hello’);
newDiv.appendChild(newContent);
上面代码新建一个div节点和一个文本节点，然后将文本节点插入div节点。
这个方法可以确保返回的节点，被浏览器当作文本渲染，而不是当作 HTML 代码渲染。因此，可以用来展示用户的输入，避免 XSS 攻击。
var div = document.createElement(‘div’);
div.appendChild(document.createTextNode(‘ Foo & bar’));
console.log(div.innerHTML)
// <span>Foo & bar</span>
上面代码中，createTextNode方法对大于号和小于号进行转义，从而保证即使用户输入的内容包含恶意代码，也能正确显示。
需要注意的是，该方法不对单引号和双引号转义，所以不能用来对 HTML 属性赋值。
function escapeHtml(str) {
var div = document.createElement(‘div’);
div.appendChild(document.createTextNode(str));
return div.innerHTML;
};
var userWebsite = ‘" οnmοuseοver=“alert(‘derp’)” "’;
var profileLink = ‘
1330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
