2021-07-16

操作DOM对象

核心

浏览器网页就是一个DOM数形的结构!

1.更新: 更新DOm节点

2.遍历Dom节点: 得到Dom节点

3.删除: 删除一个Dom节点

4.添加:添加一个新的节点

要操作一个Dom节点, 就必须要先获得这个节点Dom节点

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

<script>
    //对应css选择器
    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  最后一个节点
</script>

这是原生代码,之后都是用jQuery;

更新节点

<div id="id1">

</div>
<script>
    var id1=document.getElementById('id1');
</script>

操作文本

id1.innerText='456'修改文本的值
id1.innerHTML='<strong>123<strong>'加粗,可以解析HTML文本标签

操作js

id1.style.color='red';属性使用 字符串 包裹
id1.style.fontSize='20px' 转 驼峰命名问题
id1.style.padding='2em'

删除节点

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

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var  self=document.getElementById('p1');//先获取子节点
	var =p1.parentElement;//获取父元素
    father.removeChild(self)//删除

	//删除是一个动态的过程:
	father.removechild(father.children[0])
	father.removechild(father.children[1])
	father.removechild(father.children[2])
</script>

注意:删除多个节点的时候,children说在时刻变化的,删除节点的时候一定要注意!

插入节点

我们获得了某个Dom节点,假设这个Dom节点是空的,我们通过innerHTML就可以增加一个元素了,

但是这个Dom节点已经存在元素了,我们就不能这么干了!会产生覆盖

追加

<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'),
        list=document.getElementById('list');
   // list.appendChild(js);//追加到最后面
</script>

创建一个新的标签,实现插入

<script>

    var js=document.getElementById('js'),//已经存在的节点
        list=document.getElementById('list');
    //list.appendChild(js);//追加到最后面
    //通过js 创建一个新的节点
    var newp=document.createElement('p');//创建一个p标签
    newp.id='newp';
    newp.innerText='Hello world2';
    list.appendChild(newp);
    //创建一个标签节点  (通过这个属性,可以设置任意的值)
    var myscript=document.createElement('script');
    myscript.setAttribute('type','text/javascript')
    //可以创建一个style标签
    var mystyle=document.createElement('style');//创建了一个空的style标签
    mystyle.setAttribute('type','text/css');
    mystyle.innerHTML='body{background: #09d7f1;}';//设置标签内

    document.getElementsByTagName('head')[0].appendChild(mystyle)

</script>

insertBefore

<script>
    var ee=document.getElementById('ee');
    var js=document.getElementById('js');
    var se=document.getElementById('se');
    var list=document.getElementById('list');
    //要包含的节点.insertBefore(newNode,targetNode)
    list.insertBefore(se,js);
</script>