首页 > 代码库 > dom 学习随笔2
dom 学习随笔2
dom2
1、innerText、innerHTML
innerText 返回标签内容的文本的表示形式
innerHTML 返回标签内容的文本的Html源代码
var link = document.createElement("a");
link.href = "http://www.baidu.com";
link.innerHTML = "百度";
//link.innerText = "百度";
link.target = "_blank"; //重新打开一个窗口
2、Value 获取表单元素
几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
<a href="http://www.itcast.cn" id="link1">传<font color="Red">智</font>播客</a>
<input type="button" value="http://www.mamicode.com/inner*" onclick="alert(document.getElementById(‘link1‘).innerText);alert(document.getElementById(‘link1‘).innerHTML);" />
用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建
function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<a href=http://www.mamicode.com/‘http://www.baidu.com‘>baidu";
}
3、冒泡事件
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。
触发的顺序是“由内而外” 。
4、this
事件中的this。除了可以使用event.srcElement在事件响应函数中，
this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件
在事件响应函数调用的函数中不能使用this
如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的
this就是表示当前监听事件的这个对象
event.srcElement是引发事件的对象：事件冒泡。
5、修改样式
易错：修改元素的样式不是设置class属性，而是className属性。案例：网页开关灯的效果。
修改元素的样式不能this.style="background-color:Red"。
易错：单独修改样式的属性使用“style.属性名”。
注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有“-”的属性，因为JavaScript中“-”是不能做属性、类名的。
所以CSS中背景颜色是background-color，而JavaScript则是style.backgroundColor；元素样式名是class，在JavaScript中是className属性；font-size→style.fontSize；margin-top→style.marginTop
单独修改控件的样式<input type="button" value="http://www.mamicode.com/AAA" onclick="this.style.color=‘red‘" />。
技巧，没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。
6、onfocus 鼠标进入控件事件
onblur 鼠标离开空间事件
示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
.light {
background-color:red;
}
.dark {
background-color: yellow;
}
</style>
<script type="text/javascript">
function add() {
var name = document.getElementById("txtName").value;
var content = document.getElementById("txtContent").value;
var tr = document.createElement("tr");
var td0 = document.createElement("td");
td0.innerText = name;
tr.appendChild(td0);
var td1 = document.createElement("td");
td1.innerText = content;
tr.appendChild(td1);
var table = document.getElementById("re");
table.appendChild(tr);
}
function add2() {
var name = document.getElementById("txtName").value;
var content = document.getElementById("txtContent").value;
var table = document.getElementById("re");
var tr = table.insertRow();
var td = tr.insertCell();
td.innerText = name;
var td1 = tr.insertCell();
td1.innerText = content;
}
function btn3() {
alert(event.srcElement.value);
}
function btn4() {
alert(this.value);
}
function opens() {
document.body.className = "light";
}
function closes() {
document.body.className = "dark";
}
function changes() {
var btn = window.document.getElementById("btn1");
btn.style.backgroundColor = "Green";
}
function iBlur(txt) {
if (this.value.length <= 0) {
this.style.backgroundColor = "red";
} else {
this.style.backgroundColor = "white";
}
}
function iFocus() {
this.valuehttp://www.mamicode.com/= "";
}
function initTxt() {
var txts = document.getElementsByTagName("input");
for (var i = 0; i < txts.length; i++) {
if (txts[i].type == "text") {
txts[i].onblur = iBlur;
}
}
}
</script>
</head>
<body onl oad="initTxt()">
<input type="button" value="http://www.mamicode.com/红灯" onclick="opens()" style="background-color:red"/>
<input type="button" value="http://www.mamicode.com/黄灯" onclick="closes()" style="background-color:yellow" />
<input id="btn1" type="button" value="http://www.mamicode.com/绿灯" onclick="this.style.backgroundColor=‘green‘" />
<br />
<input type="text" value="" /> <!--onblur="iBlur(this)"-->
<input type="text" value="" />
<input type="text" value="" />
<input type="button"value="http://www.mamicode.com/CHICK"onclick="" />
<p>style="background-color:green"
最新新闻
</p>
<p>
内容： --var tr = document.createElement("tr");
var td0 = document.createElement("td");
td0.innerText = name;
tr.appendChild(td0);
var td1 = document.createElement("td");
td1.innerText = content;
tr.appendChild(td1);
var table = document.getElementById("re");
table.appendChild(tr);--！
</p>
<table id="re" border="0"></table>
<br />
<hr />
评论：
<input id="txtName" type="text" value="" /><br />
<textarea id="txtContent" cols="50" rows="10"></textarea>
<br />
<input type="button" value="http://www.mamicode.com/评论2" onclick="add2()" />
<br />
<input type="button" value="http://www.mamicode.com/评论" onclick="add()" />
<br />
<input type="button" value="http://www.mamicode.com/按钮" onclick="alert(‘hello‘)" /><br />
<table onclick="alert(‘table‘)">
<tr><td><div>
</div></td></tr>
</table>
<input type="button" value="http://www.mamicode.com/click1" onclick="alert(event.srcElement.value)"/>
<input type="button" value="http://www.mamicode.com/click2" onclick="alert(this.value)" /> //直接响应函数
<input type="button" value="http://www.mamicode.com/click3" onclick="btn3()" />
<input type="button" value="http://www.mamicode.com/click4" onclick="btn4()" /> //事件响应函数
</body>
</html>
dom 学习随笔2