1 获取DOM对象
DOM: 文档对象模型； html所有标签都属于文档，所有通过文档对象可以拿到所有标签
应用： 获取元素对象（标签对象）
1.使用id获取元素
var obj = document.getElementById("a"); 2.使用class获取元素 (class获取的是集合)
var obj = document.getElementsByClassName("yy")[0];3.使用标签获取元素(标签获取的是集合)
var obj = document.getElementsByTagName("h1")[0];应用场景：通过获取到元素，我们就可以操作标签内容，属性，样式，事件等
2 修改元素内容
/* 案例：修改h1的内容 */
var obj = document.getElementsByTagName("h1")[0];
//alert(obj.innerHTML); //取值
//obj.innerHTML = "<a href='#'>修改标题</a>"; //带标签格式的修改内容
obj.innerText = "<a href='#'>修改文本</a>"; //纯文本格式的修改内容
3 修改元素属性
var obj = document.getElementById("img");
obj.src = "../img/d.jpg";
obj.width = 200;
obj.height = 250;
4 修改元素样式
var obj = document.getElementsByTagName("h1")[0];
obj.style.color = "red";5.事件（重点）
1 点击事件与this
<!-- 案例：点击事件触发，然后触发修改内容 -->
<h1 onclick="myclick()" id="a">标题1</h1>
<!-- this使用：与java类似，代表当前对象，当前标签对象 -->
<h1 onclick="this.innerHTML='赵本山'" id="a">标题2</h1>
<!-- this作为参数传递，在实现中则无需document获取对象 -->
<h1 onclick="myclick2(this)">标题3</h1>
<script>
function myclick(){
alert("点击事件");
var obj = document.getElementById("a");
obj.innerHTML="刘德华";
}
function myclick2(o){
o.innerHTML="刘亦菲";
}
</script>
2 点击按钮事件
<!-- 案例：点击按钮，修改标题1的内容 -->
<!-- 扩展了解：通过对象调事件 -->
<h1 id="h">标题1</h1>
<input type="button" value="修改标题" onclick="btn()" />
<input type="button" value="修改标题2" id="btn" />
<script>
function btn(){
var obj = document.getElementById("h");
obj.innerHTML = "漂亮标题";
}
var btn = document.getElementById("btn");
btn.onclick=function(){
alert("通过元素调事件");
}
</script>
3 获取与失去焦点事件
<input type="text" value="请输入邮箱地址"
onfocus="myfocus(this)" onblur="myblur(this)" />
<script>
/*获取与失去焦点
案例：失去焦点时在文本框显示，'请输入邮箱地址',获取焦点时，清除该内容
分析： 点击当前控件-当前控件则获取到焦点；点击其他-当前控件失去焦点
onfocus:获取焦点事件 onblur：失去焦点事件
*/
function myfocus(o){
if(o.value=="请输入邮箱地址"){
o.value = "";
}
}
function myblur(o){
debugger //js中的debug调试 需要将控制台打开-f12
if(o.value==""){ //如果去除左右空格，可以+trim()
o.value = "请输入邮箱地址";
}
}
</script>
4 级联列表更改事件
案例：有两个级联下拉列表，一个显示省份，一个显示城市；变更省份后，联动变更城市
分析：onchange事件，获取省份选项内容，根据判断，显示不同的值在城市标签中即可
var city = document.getElementById("city");
function change(province){
if(province.value=="hn"){ //在js中直接用==判断字符串；在java中使用equals
//显示湖南城市
city.innerHTML="<option>长沙</option><option>郴州</option><option>永州</option>"
}else if(province.value=="hb"){
city.innerHTML="<option>武汉</option><option>荆州</option>";
}
}
5 监听事件（了解）
addEventListener() 方法
-
在用户点击按钮时触发监听事件
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
| 参数名 | 描述 |
|---|---|
| event | 事件的类型 (如 "click" 或 "mousedown") |
| function | 事件触发后调用的函数 |
| useCapture | 用于描述事件是冒泡还是捕获。该参数是可选的 |
addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);你可以向同个元素添加不同类型的事件：
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);-
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
-
当用户重置窗口大小时添加事件监听：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});-
事件传递有两种方式：冒泡false与捕获true。
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
6.操作元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
创建元素：document.createElement()
追加元素：appendChild()
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有的 HTML 元素
使用方法：removeChild()
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>必须是父级标签删除子标签
某单元格操作删除表格的一行
function del(obj){
//自杀
obj.parentElement.parentElement.removeChild(obj.parentElement);
}
浙公网安备 33010602011771号