JS学习笔记-操作DOM对象

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>