1,DOM介绍
JavaScript一共包括三部分,分别是ECMAScript也就是JavaScript基础、DOM和BOM
DOM(Document Object Model)文档对象模型,所谓文档,也就是对网页中的内容、结构和样式进行操作,对象也就是在操作过程中返回值为对象类型,我们学习DOM主要就是对元素进行创建、增、删、改、查、属性操作、时间操作,来看下DOM树吧,最顶层就是Document
2,DOM操作属性
通过我们各种获取元素的方式获取到页面中的标签以后,我们可以直接操作 DOM 元素的属性,就能直接把效果展示在页面上
3.innerHTML
功能
a.获取元素内部的HTML结构
b.设置元素内容
<script type="text/javascript">
window.onload = function(){
var linkObj = document.getElementById("link");
linkObj.href = 'http://www.baidu.com';
linkObj.title = 'baidu';
linkObj.innerHTML = '百度';
linkObj.className="link"
console.log(linkObj.href,linkObj.title,linkObj.innerHTML);
}
</script>
</head>
<body>
<a href="http//www.show.com " title="sohu" id="link">搜狐</ a>
</body>
4. 鼠标经过
<script type="text/javascript">
function change(R) { // onmouseover 鼠标经过
var picObj = document.getElementById("pic");
if(R=='horse'){
picObj.src = 'img/horse.jpg';
}else if(R=="dog"){
picObj.src ="img/dog.jpg"
}
else {
picObj.src ="img/bear.jpg"
}
}
</script>
</head>
<body>
5.表单寻址
<script type="text/javascript">
function show(){
var answer=document.reg.answer.value;
var answer=document.forms[0].answer.value;
var answer=document.getElementsByClassName("input")[3].value;
console.log(answer);
}
</script>
<form name="reg">
<p>
<label>用户名:</label>
<input type="text" name="user"/>
</p>
<p>
<label>密码:</label>
<input type="password" name="password" />
</p>
<p>
<label>密码问题:</label>
<input type="text" name="question" />
</p>
<p>
<label>密码答案:</label>
<input type="text" name="answer"/>
</p>
<p>
<input type="button" value="提交" onclick="show()"/>
</p>
</form>
6.样式属性
element.style 行内样式操作
element.className 类名样式操作
注:1.js里面的样式采取驼峰命名法 比如 fontSize,backgroundCoclor
2.修改 style 样式操作,产生的是行内样式, css 权重比较高
7.内部样式
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.pic{
position: relative;
width: 400px;
height: 260px;
margin: 50px auto 20px auto;
border: 1px solid #ccc;
}
.pic img{
width: 400px;
height: 260px;
}
.pic .mask{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 260px;
background-color: #000;
opacity: .8;
}
.btn{
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
background: #666;
margin: 0 auto;
cursor:pointer;
}
</style>