摘要：<!DOCTYPE html> <html> <head> <title>demo11 聊天室原理</title> </head> <body> <input type="text" name="info" onk
<!DOCTYPE html>
<html>
<head>
<title>demo11 聊天室原理</title>
</head>
<body>
<input type="text" name="info" onkeypress="addtxt()" id="infotxt">
<ul>
</ul>
<p>text01</p>
<p>text02</p>
<p id="tt">text03</p>
<p>text4</p>
<p>text5</p>
<input type="button" value="css selector" onclick="doit()">
<input type="button" value="DOM tree" onclick="doit1()">
<input type="button" value="create html" onclick="doit2()">
<body>
<script type="text/javascript">
function addtxt()
{
if (event.keyCode == 13) {
var vt1 = document.querySelectorAll("input");
var vsz = vt1[0].value;
if (vsz.length > 0)
{
var ul = document.getElementsByTagName('ul')[0];
var li = document.createElement('li');
li.innerHTML = vsz;
ul.appendChild(li);
vt1[0].value = '';
}
//console.log(vt1[0].value)
//alert(infotxt.text);
}
}
function doit2()
{
var vtt = document.querySelector("#tt");
var mul = document.createElement("ul");
var vhead =document.createElement("span");
var vinput =document.createElement("input");
vhead.innerText ="I am new span words";
mul.innerHTML ="<li>new li item</l,i>";
//document.body.appendChild(mul);
vtt.appendChild(mul);
vinput.setAttribute('type', 'text'); //定义类型是文本输入
//document.getElementById('form').appendChild(input ); //添加到form中显示
vtt.insertBefore(vinput,null);
vtt.insertBefore(vhead,mul);
}
// console.log(document.childNodes);
function doit1()
{
console.log(document.nodeType +"\r\n"+document.nodeName+"\r\n"+document.nodeValue);
console.log(document.childNodes+document.childNodes[1]);
}
//
function doit()
{
var vt2,vt3,vt4;
var vt1 = document.querySelectorAll("p");
console.log(vt1);
vt1[0].style.backgroundColor="red";
console.log(vt1.item(1));
vt1.item(1).style.color="blue";
vt2 = document.querySelector("#tt");
console.log(vt2);
vt2.style.fontSize = "30px";
// vt2 =
//alert("hello");
}
</script>
</html>
批改老师：天蓬老师批改时间：2019-01-24 17:19:00
老师总结：写得很有创意:
vt2 = document.querySelector("#tt");, 这样的变量定义, 以后不要再用了,应该改成: var vt2 = document.querySelector("#tt"); 以防止生成过多的全局变量,污染全局环境
