【学习笔记】DOM对象

DOM：文档对象模型

浏览器网页就是一个DOM树形结构

更新：更新DOM节点

遍历：得到DOM节点，通过ID、class等

删除：删除DOM节点

添加：添加一个新的DOM节点

要操作一个DOM节点，就必须要获得这个DOM节点

获得DOM节点

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");

    //获取父节点下的所有子节点
    var chilrens = father.children

    father.firstChild;   //第一个节点
    father.lastChild;     //最后一个节点
</script>
</body>

更新DOM节点

操作文本

<body>
<div id="id1">

</div>
<script>
    var id1 = document.getElementById('id1')
    
    id1.innerText = 'Hello,World';
    
    id1.innerHTML = '<strong>你好</strong>'
    
</script>
</body>

innerText 是修改文本的值

innerHTML是解析html文本标签

操作css

id1.style.color = 'red'   //属性使用字符串包裹
'red'
id1.style.fontSize = '50px'   //驼峰命名
'50px'

删除DOM节点

删除节点的步骤：先获取父节点，在通过父节点删除自己

<body>
<div id="id1">
1111111
</div>

<script>
    var self = document.getElementById('id1');
    var father = self.parentElement;

</script>
</body>

需要注意的是，删除是一个动态的过程，删除多个节点的时候，children是在时刻变化的。

<body>
<div id="id1">
1111111
    <p id="id2">123</p>
    <h1>feegthr</h1>
    <p>456</p>
</div>

<script>
    var self = document.getElementById('id2');
    var father = self.parentElement;


    //删除了第一个子节点，第二个子节点自动变为第一个子节点，所以这样删是错误的
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);


</script>
</body>

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素的话，我们在使用innerHTML,就会覆盖原先的元素

所以我们要往里面追加

<body>
<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)
</script>
</body>

通过js创建一个新的节点

//创建节点
var newP = document.createElement('p');   //创建p标签
newP.id = 'idp';       //给p标签设置id
newP.innerHTML = '，你好我是p标签';    //给p标签设置文本内容

list.appendChild(newP);    //把p标签加入到list节点中

创建标签节点

//创建标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','test/javascript')   //给script标签设置属性
list.appendChild(myScript);  //把script追加到list中

创建style标签

//创建style标签
var myStyle = document.createElement('style');    //创建style标签
myStyle.setAttribute('type','text/css');    //为style设置属性
myStyle.innerHTML = 'body{background-color:chartreuse}';   //设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);   //追加到head标签中

插入到前面 insertBefore

<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');
    var ee = document.getElementById('ee');

    list.insertBefore(js,ee);
</script>