2018-08-18-Python全栈开发day43-jquery

最新推荐文章于 2025-08-15 09:50:45 发布

转载最新推荐文章于 2025-08-15 09:50:45 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hai125698/p/9501050.html

文章标签：

#javascript #python #前端 #ViewUI

本文详细介绍了DOM操作的基础知识，包括节点的查找、事件处理、增删改查操作、样式修改及属性管理等内容，并提供了实例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.dom节点、方法

ele=document.getElementsByName('div')
    ele.firstElementChild查找第一个子节点
    ele.lastElementChild查找最后一个子节点
    ele.nextElementSibling查找下面紧挨着的第一个兄弟节点
    ele.previousElementSibling查找上面的兄弟节点

2.查找标签

ele=document.getElementsByName()通过标签名查找
    ele=document.getElementsByTagName()通过标签类型查找
    ele=document.getElementsByClassName()通过类名查找
    ele=document.getElementById()通过标签id查找

3. onsubmit

<form action id="form1">
    <input type="submit" value="hello">
</form>

<script>

    ele=document.getElementById('form1');
    ele.onsubmit=function (event) {
        alert('onsubmit')
    }
onsubmit会在点击sumbit的时候先执行，可以在前端对用户输入的信息进行检查，如果可以则返回true，当返回false的时候submit不执行

4.事件传播

<div class="outer" onclick="outer()">
    <div class="inner" onclick="inner()"></div>
</div>
<script>
    var outer1=document.getElementsByClassName('outer');
    var inner1=document.getElementsByClassName('inner');
    function outer() {
        alert('outer')
    }
    function inner() {
        alert('inner')
    }
对于这种情况，当点击内部的标签时，会同时出发内部和外部的标签，所以需要阻止传播

阻止传播

ele.onclick=function (e) {
        alert('inner')
        e.stopPropagation()
    }

其中的e可以拿到这次时间的所有信息，然后通过stopprogation来阻止事件传播

5. dom节点的增删改查

　　增加

<div ></div>
<script>
    ele=document.createElement('p');
    ele.innerHTML='hello';
    ele_div=document.getElementsByTagName('div')[0];
    ele_div.appendChild(ele)

　　删除

var ele=document.getElementsByClassName('div1')[0];
    var ele1=document.getElementsByClassName('p1')[0];
    ele.removeChild(ele1)

　　更改

var ele=document.getElementsByClassName('div1')[0];
    var ele1=document.getElementsByClassName('p1')[1];
    var ele2=document.getElementsByClassName('p1')[0];
    ele.replaceChild(ele1,ele2)

6.修改标签的样式

　　添加

var ele=document.getElementsByClassName('div1')[0];
    // ele.innerHTML='hello';
    ele.innerHTML='<p>hello</p>'可以识别格式

innertext无法识别格式，把所有内容当做字符串来处理

　　改变css样式

var ele=document.getElementsByClassName('div1')[0];
    ele.style.color='red'

　　改变字体大小

var ele=document.getElementsByClassName('div1')[0];
    ele.style.fontsize=17

　　改变属性

var ele=document.getElementsByClassName('div1')[0];
    ele.setAttribute('name','yehaibin')设置一个新的属性

ele.getAttribute('name')得到属性对应的值

7.class操作

var ele=document.getElementsByClassName('div1')[0];
    ele.classList.add('yehaibin')将ele元素加入到一个类中

转载于:https://www.cnblogs.com/hai125698/p/9501050.html