JS 操作内容 操作元素
操作内容：
普通元素.innerHTML = "值"； 会把标记执行渲染
普通元素.innerText = "值"； 将值原封不动的展示出来，即使里面有标记
var s = 普通元素.innerHTML; 会把此元素下的所有文本及标记代码取出来。
var s = 普通元素.innerText; 值会把此元素下的文本取出来，标记不予理会。
表单元素 - 只能使用value 来取值赋值
表单元素.value = "值";
var s = 表单元素.value;
操作相关元素
var a=document.getElementById('id'); 找到a
var b=a.nextSibling; a的下一个同辈 空格回车也算一个同辈
var c=a.previousSibling; a的上一个同辈 回车 空格也算一个同辈
var b=a.parentNode; a的父级元素
var b=a.childNodes; a的子元素 是一个数组
var b=a.firstchild; a的第一个子元素 lastchild 最后一个子元素 childNodes[ n] 找第n个子元素
alert（nodes[i] instanceof Text）判断是不是文本 是返回true 不是返回false
有[i]说明是在循环
元素的创建、添加删除
var a=document.getElementById('id'); 找到a
a.appendChild(子元素) 在a里面添加子元素 子元素同上 可以是div
a.removeChild(子元素); 删除子元素
a.selectIndex 查找的是第几个
a.options[a.selectIndex] 按下标取出第几个option对象
创建标签
document.creatElement("div"); 这里的div 只是其中的一个标签 可以写任何标签
创建 多个div
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1 {
width:200px;
height:200px;
background-color:aqua;
}
.ddd {width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn" value="创建" />
</body>
</html>
<script type="text/javascript">
var div = document.getElementById('div1');
var btn = document.getElementById('btn');
btn.onclick = function () {
div.innerHTML+="<div class='ddd'></div>"
}
</script>
评论添加删除
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<!-- 大总框-->
<div class="all">
<textarea id="text"></textarea>
<input type="button" value="发表" id="btn" />
<input type="text" id="uuu" placeholder="请输入用户名" />
</div>
<div class="iterm">
</div>
</body>
</html>
<script type="text/javascript">
var btn = document.getElementById('btn');
var int = document.getElementsByClassName('iterm');
//内容取值
var t = document.getElementById('text');
var text = t.value;
//用户名取值
var a = document.getElementById('uuu');
var user = a.value;
// 添加内容
btn.onclick = function () {
int.innerHTML+="<div class='cell'>"+user+"</div><div class='cell'>"+text+"</div><div class='cell'><input type='button' value='删除' id='dele' /> 2017-03-02</div>"
}
</script>
css
* {
margin: 0px;
padding: 0px;
}
.all {
margin-left: 20%;
width: 60%;
height: 400px;
background-color: gray;
}
#text {
width: 100%;
height: 300px;
border: 1px solid black;
}
.iterm {
margin-left: 20%;
width: 60%;
background-color: blue;
}
.cell {
position:relative;
height:50px;
width:80%;
margin-left:10%;
border-bottom:1px dashed black;
}
#dele {
position:absolute;
bottom:5px;
right:10px;
}
