您的位置：首页 > Web前端

前端js基础理论知识（五 document对象属性与方法增删改查，）

2019-02-10 16:05 507 查看

一.document对象的属性

二.document对象的方法

三.document对象集合

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document对象</title>
<link rel="stylesheet" href="css/demo1.css">
<style type="text/css">
img{width: 150px;}
</style>
<script type="text/javascript">
/*
document  文档对象

属性：
body         body元素对象
title        标题
URL 		 网页地址

links          超链接    HTMLCollection  集合  索引  0       length
images         图片
forms

方法：
write
writeln
getElementById      根据ID查找节点对象
返回值：   节点对象，null
*/

// console.log(name);

// document.write('hello<br>');
// document.write('hello');
// document.write('hello');

// document.writeln('hello');
// document.writeln('hello');

</script>
</head>
<body>
<a href="#">百度</a>
<a href="#">抖音</a>

<img src="images/2.jpg" alt="">

<div>
<a href="#">锤子</a>
<img src="images/3.jpg" alt="">
</div>
<img src="images/1.jpg" alt="">
<form action="">
<input type="text">
<input type="password">
</form>

<p>AA</p>
<p id="content">AA</p>
<p>AA</p>
</body>

<script type="text/javascript">
// console.log(document.body);
// console.log(document.title);
// document.title='文档';
// console.log(document.URL);

// console.log(document.links);
/*document.links[0].innerHTML='百度公司';
document.links[1].innerHTML='字节跳动';
document.links[2].innerHTML='锤子科技';*/

// console.log(document.images);
// document.images[1].src='images/4.jpg';
// document.images[0].src='images/1.jpg';
// document.images[2].src='images/3.jpg';

// console.log(document.forms);

//根据ID查找节点对象
var o=document.getElementById('content');
console.log(o);
o.innerHTML='哈哈哈';
</script>
</html>

节点的创建追加

创建新节点document.createElement(‘节点名’);
追加子节点appendChild
把节点对象加到body中document.body.appendChild()

var tab = document.createElement('table');//创建节点对象table

tab.innerHTML='hello world';//为节点对象添加内容

document.body.appendChild(tab);//将节点对象添加到body中

var tr=document.createElement('tr');//创建tr

tab.appendChild(tr);//tr追加到table中

var cont= document.createTextNode('你好');//创建文本节点

tr.appendChild(cont);//tr中追加文本内容

例1在页面中添加菜单

（1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{width: 980px;margin: auto;}
ul,li{list-style-type: none;}
ul li{float: left;background: #eee;margin-right: 2px;width: 115px;text-align: center;line-height: 35px;}
ul li:hover{background: #999;cursor: pointer;}
</style>
</head>
<body>
<script type="text/javascript">
//创建节点对象
var Ul=document.createElement('ul');
document.body.appendChild(Ul);
var li1=document.createElement('li');
var li2=document.createElement('li');
var li3=document.createElement('li');
var li4=document.createElement('li');
//追加子节点
Ul.appendChild(li1);
Ul.appendChild(li2);
Ul.appendChild(li3);
Ul.appendChild(li4);

li1.innerHTML='首页'
li2.innerHTML='新闻'
li3.innerHTML='美食'
li4.innerHTML='关于'
</script>
</body>
</html>
（2）
<script type="text/javascript">
var oUl=setUl('首页','新闻','美食','关于');//获取UL对象
//将ul添加到body中
document.body.appendChild(oUl);

//创建ul，并且添加列
function setUl(){
//1.创建ul
var ul=document.createElement('ul');
// console.log(arguments);
//为ul追加列
for(var i=0;i<arguments.length;i++){
var oLi=getLi(arguments[i]);
ul.appendChild(oLi);
}
return ul;
}

//创建li，添加内容
function getLi(cnt){
//创建li
var li=document.createElement('li');
li.innerHTML=cnt;
return li;
}
</script>

表格创建

var tab=document.createElement(“table”);//创建表格对象

document.body.appendChild(tab);//将表格添加到body中

tab.createCaption().innerHTML=“学生信息表”;//创建标题

var tr=tab.insertRow();//添加表头行

//添加表头四列

tr.insertCell().innerHTML=“姓名”;

tr.insertCell().innerHTML=“年龄”;

tr.insertCell().innerHTML=“地址”;

tr.insertCell().innerHTML=“操作”;

removeChild删除子节点（由父级删除）

（1）
<div id="box">
<div>aaa</div>
<div>bbb</div>
</div>
<script type="text/javascript">
var receive=document.getElementById('box');//获取id保存变量中

var s1= receive.childNodes[1];//获取子节点索引

receive.removeChild(s1);//由父节点删除子节点
</script>
（2）//添加点击事件
<div id="box">
<div>111</div>
<div>222</div>
</div>
<button id="btn">删除</button>
<script type="text/javascript">
var o=document.getElementById('box');
document.getElementById('btn').onclick=function(){
o.removeChild(o.childNodes[3]);
};
</script>

增加，删除，复制

<button id="btn-add">增加</button>
<button id="btn-remove">删除</button>
<button id="btn">复制</button>

<script type="text/javascript">
var pic;
//添加点击事件
document.getElementById('btn-add').onclick=function () {
//
pic=document.createElement('img');
pic.src='images/1.jpg'
document.body.appendChild(pic);
};
//删除点击事件
document.getElementById('btn-remove').onclick=function () {
if(pic!=undefined){
document.body.removeChild(pic);
}
};
//复制
document.getElementById('btn').onclick=function () {
var pic1=pic.cloneNode();//复制节点
// console.log(pic1);
document.body.appendChild(pic1);
};
</script>

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

标签：

相关文章推荐

新的分享

章节导航

前端js基础理论知识（五 document对象属性与方法 增删改查， ）