JS DOM基础
2019-03-04 本文已影响0人
Mtllll
javascript组成
- ECMAScript: (3/5/6/7)它是JS语言的标准,规定了JS的编程语法和基础核心知识
- DOM: document object model 文档对象模型,提供给JS很多操作页面中元素的属性和方法
- BOM: browser object model 浏览器对象模型 ,提供了很多操作浏览器 的属性方法,而这些方法都存放在window浏览器对象上
dom的查找方法
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
- document.getElementById('id'):返回对拥有指定ID的第一个对象的引用，返回值是一个DOM对象
- document.getElementsByTagName('tag'):方法返回带有指定标签名的对象的集合,返回一个数组.
设置元素样式
- 语法：ele(DOM对象).style.styleName=styleValue
说明：styleName设置的样式名称不能使用“-”连字符形式font-size，要使用驼峰命名方式fontSize - ele(DOM对象).cssText=' width:200px; height:200px; ';
innerHTML
语法：ele.innerHTML
功能：返回ele元素开始和结束标签之间的html和文本内容，用来设置和获取ele元素开始和结束标签之间的html和文本内容.
操作元素的属性
- 标签自带的属性：ele.属性名
class属性特殊
语法：ele.className
功能：返回ele的class属性，用来设置和获取ele元素的class属性. - 标签自定义的属性(获取)：ele.getAttribute('自定义属性名')
(设置)：ele.setAttribute(’属性名’，‘属性值’)
(删除)：remove.Attribute(’属性名’);
this
js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
// this : 这个
// this： 指的是调用 当前 方法（函数）的那个对象
function fn1(){
// this
}
// fn1(); this => window
// oDiv.onclick = fn1; this => oDiv
/*
oDiv.onclick = function (){
fn1(); fn1() 里的this => window
};
<div onclick="fn1();"></div> fn1(); 里的 this 指的是 window
*/
// alert( this ); // object window
// window 是 JS “老大”
// window.alert( this );
function fn1(){
alert( this ); // window
}
// fn1();
// window.fn1();
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
<input id="btn2" type="button" onclick=" fn1(); " value="按钮2" />
<script>
var oBtn = document.getElementById('btn1');
// oBtn.onclick = fn1;
oBtn.onclick = function (){
// this
fn1();
};
</script>
</body>
</html>
索引值
js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].index = i; // 自定义属性（索引值）
aBtn[i].onclick = function (){
alert( this.index );
};
}
};
</script>
</head>
<body>
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
</body>
</html>
综合实战练习（qq列表）
js
<ul id="friend">
<li>
<h2>我的好友</h2>
<ul>
<li>王一一</li>
<li>李文化</li>
<li>高发展</li>
</ul>
</li>
<li>
<h2>我的同事</h2>
<ul>
<li>黄腾达</li>
<li>刘和谐</li>
<li>邢如意</li>
<li>沈从文</li>
<li>张曼玉</li>
</ul>
</li>
<li>
<h2>我的同学</h2>
<ul>
<li>郭文明</li>
<li>尹调整</li>
<li>郑安全</li>
</ul>
</li>
</ul>
*{ margin:0; padding:0; list-style:none; font-family:"微软雅黑";}
#friend{ width:300px; margin:50px auto 0; border-left:1px solid #ccc; border-right:1px solid #dadada;}
#friend h2{ width:270px; height:35px; line-height:35px; padding-left:30px; background: #74a400; color:#fff; font-size:16px; font-weight:100; cursor:pointer;}
#friend li{ margin-bottom:1px;}
#friend li ul li{ width:270px; padding-left:30px; height:30px; line-height:30px; border-bottom:1px solid #ccc; cursor:pointer;}
#friend li ul .active{ background:#FFC;}
#friend li ul{ display:none;}
#friend li ul.hover{ display:block;}
window.onload = function (){
var oUl = document.getElementById('friend');
var aH = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
for ( var i=0; i < aH.length; i++ ) {
aH[i].index = i;
aH[i].onclick = function () {
if ( aUl[this.index].className == '' ) {
aUl[this.index].className = 'hover';
} else {
aUl[this.index].className = '';
}
};
}
for ( var j=0; j<aUl.length; j++ ) {
var aLi = aUl[j].getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function () {
this.className = 'active';
};
aLi[i].onmouseout = function () {
this.className = '';
};
}
}
}
