DOM概念/Document对象/Element对象
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< div id = " div1" > div1</ div>
< div id = " div2" > div2</ div>
< div id = " div3" > div3</ div>
< div class = " cls1" > div4</ div>
< div class = " cls1" > div5</ div>
< input type = " text" name = " username" >
< a > 点我</ a>
< input type = " button" id = " btn_set" value = " 设置属性" >
< input type = " button" id = " btn_remove" value = " 删除属性" >
< script>
var divs= document. getElementsByTagName ( "div" ) ;
var div_cls= document. getElementsByClassName ( "cls1" ) ;
var div_name= document. getElementsByName ( "username" ) ;
var table= document. createElement ( "table" ) ;
var btn_set= document. getElementById ( "btn_set" ) ;
btn_set. onclick = function ( ) {
var element= document. getElementsByTagName ( "a" ) [ 0 ] ;
element. setAttribute ( "href" , "https://www.baidu.com" ) ;
}
var btn_remove= document. getElementById ( "btn_remove" ) ;
btn_remove. onclick = function ( ) {
var element= document. getElementsByTagName ( "a" ) [ 0 ] ;
element. removeAttribute ( "href" ) ;
}
</ script>
</ body>
</ html>
Node对象
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< style>
div {
border : 1px solid red;
}
#div1 {
width : 200px;
height : 200px;
}
#div2 {
width : 100px;
height : 100px;
}
#div3 {
width : 100px;
height : 100px;
}
</ style>
< body>
< div id = " div1" > < div id = " div2" > div2</ div> div1</ div>
< a href = " javascript:void(0);" id = " del" > 删除子节点</ a>
< a href = " javascript:void(0);" id = " add" > 添加子节点</ a>
< script>
var element_a= document. getElementById ( "add" ) ;
element_a. onclick = function ( ) {
var div1= document. getElementById ( "div1" ) ;
var div3= document. createElement ( "div" ) ;
div3. setAttribute ( "id" , "div3" ) ;
div1. appendChild ( div3) ;
}
var element_a= document. getElementById ( "del" ) ;
element_a. onclick = function ( ) {
var div1= document. getElementById ( "div1" ) ;
var div2= document. getElementById ( "div2" ) ;
div1. removeChild ( div2) ;
}
var div2= document. getElementById ( "div2" ) ;
var div1= div2. parentNode;
alert ( div1) ;
</ script>
</ body>
</ html>
案例:动态表格
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< style>
div {
text-align : center;
margin : 50px;
}
table {
margin : auto;
width : 500px;
border : 1px solid;
}
td,th {
border : 1px solid;
text-align : center;
margin : 50px;
}
</ style>
< body>
< div>
< input type = " text" placeholder = " 请输入学号" id = " id" >
< input type = " text" placeholder = " 请输入姓名" id = " name" >
< input type = " text" placeholder = " 请输入性别" id = " gender" >
< input type = " button" value = " 添加" id = " btn_add" >
</ div>
< table>
< caption> 学生信息表</ caption>
< tr>
< th> 学号</ th>
< th> 姓名</ th>
< th> 性别</ th>
< th> 操作</ th>
</ tr>
< tr>
< td> 1</ td>
< td> 张三</ td>
< td> 男</ td>
< td> < a href = " javascript:void(0);" onclick = " delTr(this)" > 删除</ a> </ td>
</ tr>
< tr>
< td> 2</ td>
< td> 李四</ td>
< td> 男</ td>
< td> < a href = " javascript:void(0);" onclick = " delTr(this)" > 删除</ a> </ td>
</ tr>
< tr>
< td> 3</ td>
< td> 小芳</ td>
< td> 女</ td>
< td> < a href = " javascript:void(0);" onclick = " delTr(this)" > 删除</ a> </ td>
</ tr>
</ table>
< script>
document. getElementById ( "btn_add" ) . onclick = function ( ) {
var id= document. getElementById ( "id" ) . value;
var name= document. getElementById ( "name" ) . value;
var gender= document. getElementById ( "gender" ) . value;
var td_id= document. createElement ( "td" ) ;
text_id= document. createTextNode ( id) ;
td_id. appendChild ( text_id) ;
var td_name= document. createElement ( "td" ) ;
text_name= document. createTextNode ( name) ;
td_name. appendChild ( text_name) ;
var td_gender= document. createElement ( "td" ) ;
text_gender= document. createTextNode ( gender) ;
td_gender. appendChild ( text_gender) ;
var td_a= document. createElement ( "td" ) ;
var a= document. createElement ( "a" ) ;
a. setAttribute ( "href" , "javascript:void(0);" )
a. setAttribute ( "onclick" , "delTr(this);" )
var text_a= document. createTextNode ( "删除" ) ;
a. appendChild ( text_a) ;
td_a. appendChild ( a) ;
var tr= document. createElement ( "tr" ) ;
tr. appendChild ( td_id) ;
tr. appendChild ( td_name) ;
tr. appendChild ( td_gender) ;
tr. appendChild ( td_a) ;
var table= document. getElementsByTagName ( "table" ) [ 0 ] ;
table. appendChild ( tr) ;
}
function delTr ( obj) {
var table= obj. parentNode. parentNode. parentNode;
var tr= obj. parentNode. parentNode;
table. removeChild ( tr) ;
}
</ script>
</ body>
</ html>