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="inner*" οnclick="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.baidu.com'>baidu</a>";
}
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="AAA" οnclick="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.value = "";
}
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 οnlοad="initTxt()">
<input type="button" value="红灯" οnclick="opens()" style="background-color:red"/>
<input type="button" value="黄灯" οnclick="closes()" style="background-color:yellow" />
<input id="btn1" type="button" value="绿灯" οnclick="this.style.backgroundColor='green'" />
<br />
<input type="text" value="" /> <!--οnblur="iBlur(this)"-->
<input type="text" value="" />
<input type="text" value="" />
<input type="button"value="CHICK"οnclick="" />
<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="评论2" οnclick="add2()" />
<br />
<input type="button" value="评论" οnclick="add()" />
<br />
<input type="button" value="按钮" οnclick="alert('hello')" /><br />
<table οnclick="alert('table')">
<tr><td><div>
</div></td></tr>
</table>
<input type="button" value="click1" οnclick="alert(event.srcElement.value)"/>
<input type="button" value="click2" οnclick="alert(this.value)" /> //直接响应函数
<input type="button" value="click3" οnclick="btn3()" />
<input type="button" value="click4" οnclick="btn4()" /> //事件响应函数
</body>
</html>