您的位置：首页 > Web前端 > JavaScript

[知了堂学习笔记]_JS的DOM基本操作

2017-12-08 17:39 821 查看
请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

1.DOM全称：

document object model，文档对象模型

2.DOM的意义：

通过js让网页中的元素变成对象，通过面向对象的操作的放式来改变网页中元素的样式和属性。

3.HTML DOM节点

每一个文档是文档节点。

每一个HTML元素是元素节点。

HTML元素内的文本是文本节点。

每个HTML属性是属性节点。

注释是注释节点。

4.查找HTML元素

4.1要想使用js去操作HTML中的元素，首先必须找到该元素。

4.2找到元素的方法

4.2.1通过id来找HTML元素（getElementById()）

4.2.2通过标签名找到HTML元素（getElementsByTagName()）

4.2.3通过类名找到HTML元素（getElementsByName()）

5.改变HTML内容

5.1 改变HTML中的内容最简单的方式是使用innerHTML属性

5.2 除了innerHTML属性，还有innerText属性，该属性只能改变HTML中的文本内容。

document. getElementById(id).innerHTML = 新的HTML

document. getElementById(id).innerText = 新的文档内容

6.改变HTML样式

6.1 改变HTML元素的样式

document. getElementById(id).style.property = 新样式

6.2 加入css样式表

document. getElementById(id).className = “类名”

7.创建HTML元素节点

7.1在创建节点时需要利用document.createElement(节点名称)

7.2HTML是一个文档树，每个HTML元素之间必然有子父关系。将新创建好的元素节点加入到文档中需要利用node.appendChild（节点对象）



8.删除HTML元素节点

9.DOM基础操作案例

css部分：

<style>
main{
position: absolute;
width: 400px;
height: 400px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
border: 1px solid black;
}
.top{
width: 100%;
height: 50px;
background: green;
text-align: center;
color: white;
line-height: 50px;
}
.drawing{
position: relative;
width: 150px;
height: 200px;
top: -50px;
left: 400px;
}
span{
text-align: center;
border-radius: 5px;
border: 1px solid black;
padding: 5px;
}
p{
text-align: center;
}
.content{
position: absolute;
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 5px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>


body部分：

<body>
<div class="main">
<div class="top">点击画板</div>
<div class="drawing">
<p>选择颜色</p>
<p>
<span style="background: red;" id="c01">红色</span>
<span style="background: yellow;" id="c02">黄色</span>
<span style="background: blue;" id="c03">蓝色</span>
</p>
<p>选择宽度</p>
<p>
<span id="s01">100</span>
<span id="s02">150</span>
<span id="s03">200</span>
</p>
<p>选择高度</p>
<p>
<span id="h01">100</span>
<span id="h02">150</span>
<span id="h03">200</span>
</p>
</div>
</div>
<div class="content" id="content"></div>
</body>


js部分：

<script>
var c01 = document.getElementById("c01");
var c02 = document.getElementById("c02");
var c03 = document.getElementById("c03");
var h01 = document.getElementById("h01");
var h02 = document.getElementById("h02");
var h03 = document.getElementById("h03");
var s01 = document.getElementById("s01");
var s02 = document.getElementById("s02");
var s03 = document.getElementById("s03");

c01.onclick = function(){
var content = document.getElementById("content")
content.style.background = "red";
};
c02.onclick = function(){
var content = document.getElementById("content")
content.style.background = "yellow";
};
c03.onclick = function(){
var content = document.getElementById("content")
content.style.background = "blue";
};
h01.onclick= function(){
var content = document.getElementById("content");
content.style.height = 100+"px";
};
h02.onclick= function(){
var content = document.getElementById("content");
content.style.height = 150+"px";
};
h03.onclick= function(){
var content = document.getElementById("content");
content.style.height = 200+"px";
};
s01.onclick= function(){
var content = document.getElementById("content");
content.style.width = 100+"px";
};
s02.onclick= function(){
var content = document.getElementById("content");
content.style.width = 150+"px";
};
s03.onclick= function(){
var content = document.getElementById("content");
content.style.width = 200+"px";
};
</script>


10.DOM事件

10.1事件的概念

JavaScript事件就是为了去执行我们已经定义好的函数方法。

Js可以让HTML具备动作或行为，所以为了让这个动作或者行为能够执行，就需要事件。

例如：按钮点击事件，鼠标移动事件….

10.2事件如何使用

10.2.1HTML事件属性，也就是在HTML标签元素中加入事件属性，一般事件属性以onXXX=”函数名称”

Function show（）{}
<button onclick=”show()”></button>


10.2.2使用HTML DOM来分配事件

Onclick = javascript;


10.3事件分类

10.3.1鼠标事件



10.3.2键盘事件



10.3.3表单事件



10.3.4拖动事件



下面我们来写一个demo，这个demo包括Js的DOM事件，和前面所学的知识的一个小小的总结：

许愿墙demo

css样式：

<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top,rgb(203,235,219),rgb(55,148,192));
}
#container{
width: 100%;
height: 80vh;
position: relative;
outline: 1px solid black;
z-index: 0;
}
#input{
width: 400px;
height: 40px;
display: block;
margin: 30px auto;
font-size: 18px;
padding: 0 10px;
}
.items{
width: 200px;
position: absolute;
padding: 30px 10px 10px;
-webkit-border-bottom-left-radius: 20px 500px;
-webkit-border-bottom-right-radius: 500px 3
b84b
0px;
-webkit-border-top-right-radius: 5px 100px;
bos-shadow:0 2px 10px 1px rgba(0,0,0,0.2);
}
.items p{
width: 100%;
min-height: 80px;
word-break: break-all;
}
.items span{
float: right;
margin: 10px 10px 0 0;
color: white;
font-size: 14px;
}
.items span:hover{
cursor: pointer;
}
</style>


body样式：

<body>
<div id="container"></div>
<input id="input" type="text" placeholder="许愿个愿吧，反正不知道能不能实现╮(╯▽╰)╭">
</body>


js样式：

<script>
var input,container;
window.onload = function(){
input = document.getElementById("input");
container = document.getElementById("container");
input.onkeydown = function(e){
if(e.keyCode=='13'){
var v = input.value;
if(v){
createItems(v);
input.value="";
input.setAttribute("placeholder","许愿个愿吧，反正不知道能不能实现╮(╯▽╰)╭");
}
}
}
}
//创建一个许愿墙贴
function createItems(text){
var color = getRandomColor();
var positionX = getRandomPosition("x");
var positionY = getRandomPosition("y");
var newDiv = '<div class="items" style="background-color:'+color+';top:'+positionY+'px;left:'+positionX+'px;">' +
'<p>'+text+'</p>' +
'<span class="closeTabs">关闭</span>' +
'</div>';
container.innerHTML+=newDiv;
}
//获取随机颜色
function getRandomColor(){
var c = "0123456789abcdef";
var color = "";
while(color.length<6){
color +=c[Math.floor(Math.random()*16)];
}
return "#"+color;
}
//获取随机定位
//随机的X，或者随机的Y
function getRandomPosition(p){
var position;
switch (p){
case 'x':
position = Math.ceil((Math.random()*900));
if(position>0&&position<container.clientWidth-220){
return position;
}else{
return getRandomPosition(p);
}
break;
case 'y':
position = Math.ceil((Math.random()*600));
if(position>0&&position<container.clientHeight-260){
return position;
}else{
return getRandomPosition(p);
}
break;
default :
break;
}
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  dom js
相关文章推荐
新的分享
章节导航