DOM的增删改查
2017-04-23 本文已影响0人
饥人谷__陈俊豪
** 文档对象模型（DOM），他给文档（结构树）提供了一个结构化的表达方法。**
DOM结构树
demo链接
<body>
<button>添加</button>
<p class="p1">别删除我呀~~ p1
<span class="span">hello</span>
</p>
<div class="div1">别改我~别改我~
<span class="span2">那就只能改你了</span>
</div>
</body>
<script>
var btn = document.querySelector('button')
var Body = document.querySelector('body')
var p1 = document.querySelector('.p1')
var span1 = document.querySelector('.span')
var div1 = document.querySelector('.div1')
var span2 = document.querySelector('.span2')
btn.addEventListener('click',function(){
// 1. 创建一个元素 div，这里可以是任意元素
// 把新Div 插入到Body上
let Div = document.createElement('div')
Body.appendChild(Div)
// 2. 生成一个文本节点，参数就是文本所需要的内容
// 把文本插入到所需要的元素上
// 插入的位置也可以用insertBefore()
let txt = document.createTextNode('Hello我是文本');
Div.appendChild(txt)
// 3.给元素添加一个属性
// 让它的字体颜色变为红色
let Atb = document.createAttribute('class')
Atb.value = 'attribute'
Div.setAttributeNode(Atb);
// 4.删除一个p的子节点
// 然后再通过parent删除自身
p1.removeChild(span1)
p1.parentNode.removeChild(p1)
// 5.新增一个节点，把新增节点跟p1对换
var div1Txt = document.createTextNode("a啊啊啊啊~~我被改了~~");
var newDiv = document.createElement('span')
newDiv.appendChild(div1Txt)
var parentDiv = span2.parentNode;
parentDiv.replaceChild(newDiv,span2)
// 6.div1 添加内容
div1.innerHTML += "我是被新增的"
// 各种获取元素的方法
/*
getElementById(id)
getElementsByTagName(element)
getElementsByClassName(class)
*/
})
</script>
其中会遇到remove不能删除本身的问题，可以用找到父级然后再删除自身。 还有很多问题要慢慢动手踩坑， 无法避免~
