DOM:文档对象模型
核心:
浏览器网页就是一个Dom树形结构
要操作一个Dom节点,就必须要先获得这个Dom节点
获得dom节点:
//对应JSS选择器
var h1= document.getElementsByTagName('h1')
var p1= document.getElementById('p1')
var p2= document.getElementsByClassName('p2')
var father= document.getElementById('father')
var childrens = father.children;//获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;
这是原生代码,之后尽量都是用JQ
更新节点:
<div id="div1">
</div>
<script>
var id1 = document.getElementById('div1');
</script>
操作文本:
id1.innerText='456'//修改文本的值
id1.innerHTML='<strong>1234<strong>' //可以解析HTML标签
操作JS:
id1.style.color='red' // 属性使用字符串包裹
id1.style.fontSize='20px' // - 转 驼峰命名
id1.style.padding='2em'
删除节点:
先获取父节点,再通过父节点删除自己
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1= document.getElementsByTagName('h1');
var father = p1.parentElement;
father.removeChild(p1)
//删除时一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意:删除多个节点的时候,children是时刻变化的,删除结点的时候一定要注意
插入节点:
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素,但是这个DOM节点已经存在元素的话,就不行,会产生覆盖
追加:
<p id="JS">JS</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavamME</p>
</div>
<script>
var js =document.getElementById('JS');
var list =document.getElementById('list');
list.appendChild(js) //追加到后面
</script>
创建一个新的标签,实现插入
<script>
var js =document.getElementById('JS');// 已存在的节点
var list =document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.createElement('P'); //创建一个P标签
newP.id='newP';
newP.innerText='hello';
list.appendChild(newP); //往list里添加子节点
// 创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
var myStyle = document.createElement('style');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color: chartreuse};';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
insert:
var ee = document.getElementById('ee');
var js = document.getElementById('JS');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
ee.insertBefore(js,ee)