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

JS的DOM操作

2016-07-16 10:57 645 查看

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM模型被构造为对象的树

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML

例子

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title></title>
<script type="text/javascript">
//显示
function show(){
//获取p节点（元素）
var p = document.getElementById('content');

//设置style
//p.style = 'display:block;';
console.log(p.style);
}
//隐藏
function hide(){
//获取p节点（元素）
var p = document.getElementById('content');
//设置style
//p.style = 'display:none;';
console.log(p.style);
}

//查看对象里面的所有属性
function find(o){
for(var name in o){
console.log(name + '-' + o[name]);
}
}
</script>
</head>
<body>

<button onclick="show();">show</button>
<button onclick="hide();">hide</button>

<p id="content">dasdasdasasd</p>

</body>
</html>

图片切换例子

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title></title>
</head>
<body>

<img src="images/icon_01.png">
<p></p>
<div>
<button id="previous">上一张</button>
<button id="next">下一张</button>
</div>

</body>

<script type="text/javascript">

var minIndex = 1;
var maxIndex = 9;

//图片索引
var index = 1;
//上一张按钮
var previous = document.getElementById('previous');
previous.onclick = function(){
//操作索引
if(index == minIndex ){
index = maxIndex ;
}else{
index--;
}
//根据索引显示对应的图片
var img = document.getElementsByTagName('img')[0];
img.src = 'images/icon_0' + index + '.png';
};
//下一张按钮
var previous = document.getElementById('next');
next.onclick = function(){
//操作索引
if(index == maxIndex ){
index = minIndex ;
}else{
index++;
}
//根据索引显示对应的图片
var img = document.getElementsByTagName('img')[0];
img.src = 'images/icon_0' + index + '.png';
};

</script>
</html>

JS的节点操作

html文件

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title></title>
</head>
<body>

<div id="content" style="color:red">

</div>
<div>
<img class="zg" src="images/icon_09.png">
</div>
</body>

<!-- 只要script标签用了src属性引用了某个文件，就不能在script标签里面编写JS代码 -->
<script src="js/index.js"></script>
</html>

js文件

// 把内容塞到body中
//document.write('666');
//document.write('<div style="color:red;">123</div>');

//创建了一个img标签，添加到body中
var img = document.createElement('img');
img.src = 'images/icon_01.png';

// 将img标签拼接到body标签的最后面
//document.getElementByName('body')[0].appendChild(img);
// 取得body最简单最可靠的办法:document.body
document.body.appendChild(img);

//添加p标签到div中
var div = document.getElementById('content');
var p = document.createElement('p');

//设置p标签里面的内容
p.innerHTML = '123';
div.appendChild(p);

// 获得img标签
var zg = document.getElementsByClassName('zg')[0];//这个方法不兼容IE
//document.body.removeChild(zg);
zg.parentNode.removeChilde(zg);

alert(document.body.childNodes.length);

// CRUD 增删改查
// Create
// Read
// Update
// Delete

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航