Java教程

javaScript16-操作DOM对象

本文主要是介绍javaScript16-操作DOM对象，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

核心、

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

  • 更新DOM节点
  • 遍历DOM节点：得到DOM节点
  • 删除DOM节点
  • 添加DOM节点

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

获得DOM节点

<body>
<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 children=father.children;//获取父节点下所有子节点
    //father.firstChild
    //father.lastChild

</script>

</body>


这是原生代码，之后我们尽量用jQuery();

更新DOM节点

<body>

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

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

</body>

  • 修改文本的值

  • 可以解析HTML文本标签

  • 操作css

删除DOM节点

删除节点的步骤：先获取父节点，再通过父节点删除

<body>

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p> <!-- 如何将这个DOM节点删除？-->
    <p class="p2">p2</p>
</div>

<script>

    var father=p1.parentElement;//获得p1的父节点 注意此处不是方法是属性

</script>

</body>


也可以用下标来移除：father.removeChild(father.children[0])；

插入DOM节点

  • 移动
<body>

<p id="js">javaScript</p>  <!-- 如何将这个DOM节点移到下面的div块中-->
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p ID="me">javaME</p>
</div>

<script>


    var kk=document.getElementById('js');
    var list=document.getElementById('list');


</script>

</body>


  • 创建一个新节点,实现插入
<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 kk=document.getElementById('js');
    var list=document.getElementById('list');

    //通过JS创建一个新的节点
    var newP=document.createElement('p');//意思是创建一个p标签
    newP.id='newp';//另一种写法newP.setAttribute('id','newp');
    newP.innerText='卡卡';
    list.appendChild(newP);

</script>

</body>

  • insert
<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 ee=document.getElementById('ee');
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.insertBefore(js,ee)//在js前插入ee
    
</script>

</body>

这篇关于javaScript16-操作DOM对象的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航