JS学习笔记-操作DOM对象
DOM:文档对象模型
浏览器网页就是一个DOM树形结构
- 核心
- 更新:更新一个DOM节点
- 遍历:得到DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个新的节点
要想操作一个DOM节点,就必须先获得这个DOM节点
- 获得DOM节点
// 对应CSS选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var children = father.children; // 获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;
上述皆为原生代码,之后尽量都使用JQuery
-
更新节点
操作文本
<div id="div1">
</div>
<script>
var div1 = document.getElementById('div1');
div1.innerText = "你好"; // 修改文本的值
div1.innerHTML = "<h1>innerHtml</h1>" // 可以解析HTML文本标签
</script>
操作CSS
div1.style.color = 'red'; // 属性使用字符串包裹
div1.style.fontSize = '20px'; // - 转 驼峰命名规则
div1.style.padding = '2em';
- 删除节点
步骤:先获取父节点,再通过父节点删除自己
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p id="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
// 删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
</script>
注意: 删除多个节点的时候,children是时刻变化的,删除节点的时候一定要注意,每删除一个节点,该集合便少一个
- 插入节点
当我们获取了某个节点时,假设此节点为空,我们可以通过innerHTML可以增加一个元素,但如果这个节点中已经存在元素了,如若继续使用innerHTML则会产生覆盖
追加
<p id="js">javaScript</p>
<div id="list">
<p id="se">javaSE</p>
<p id="ee">javaEE</p>
<p id="me">javaME</p>
</div>
<script>
var js = document.getElementById('js'); // 已存在的节点
var list = document.getElementById('list');
list.appendChild(js); // 追加节点
// 通过JS创建一个新的节点
var newP = document.createElement('p'); // 创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello';
list.appendChild(newP);
// 创建一个标签节点(通过这个属性可以设置任意的值)
var mySc = document.createElement('script');
mySc.setAttribute('type','text/javascript');
list.appendChild(mySc);
// 创建style标签
var mySt = document.createElement('style'); // 创建了一个空style标签
mySt.setAttribute('type','text/css');
mySt.innerHTML = 'body{background-color:grey}'; // 设置标签内容
document.getElementsByTagName('head')[0].appendChild(mySt);
</script>