登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript操作DOM的方法有哪些?

coldplay.xixi
发布: 2020-06-30 14:41:08
原创
4119人浏览过

javascript操作dom的方法有:1、获取节点,代码为【document.getelementbyid();】;2、css选择器,代码为【document.queryselector()】;3、文档结构,代码为【parentnod】。

JavaScript操作DOM的方法有哪些?

JavaScript操作DOM的方法有:

  一、获取节点

document.getElementById();//id=""
document.getElementsByName();//name=""
document.getElementsByTagName();//"input"
document.getElementsByClassName();//class=""
登录后复制

  二、css选择器

document.querySelector();//根据css选择器规则返回第一个匹配到的元素,"#div1>p"
document.querySelectorAll();//返回所有匹配到的元素
登录后复制

  三、文档结构

//(1)作为节点数的文档
    parentNode    //获取该节点的父节点   
    childNodes    //获取该节点的子节点数组
    firstChild    //获取该节点的第一个子节点
    lastChild    //获取该节点的最后一个子节点
    nextSibling    //获取该节点的下一个兄弟元素
    previoursSibling    //获取该节点的上一个兄弟元素
    nodeType    //节点的类型,9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点
    nodeVlue    //Text节点或Comment节点的文本内容
    nodeName    //元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示
    //注意,以上6个方法连元素节点也算一个节点
//(2)作为元素树的文档
    firstElementChild        //第一个子元素节点
    lastElementChild        //最后一个子元素节点
    nextElementSibling        //下一个兄弟元素节点
    previousElementSibling    //前一个兄弟元素节点
    childElementCount        //子元素节点个数量
    //注意,此5个方法文本节点不算进去
登录后复制

  四、javascript操作DOM

document.getElementById("img1").alt;       // 获取alt属性
document.getElementById("img1").src=""; //设置src属性
document.getElementById("img1").setAttribute("src", "1small.jpg");//非标准
document.getElementById("img1").getAttribute("class");//非标准
document.getElementsByClassName("cnblogs_code")[0].attributes;//返回节点的所有属性
登录后复制

  五、元素内容及节点创建

innerText、textContent //innerText与textContent的区别,当文本为空时,innerText是"",而textContent是undefined
innerHTML
document.createTextNode("<p>我是一个javascript新建的节点</p>");
document.createElement("p");//创建p节点
appendChild();    //将一个节点插入到调用节点的最后面
insertBefore();    //接受两个参数,第一个为待插入的节点,第二个指明在哪个节点前面,如果不传入第二个参数,则跟appendChild一样,放在最后。
removeChild();    //由父元素调用,删除一个子节点。注意是直接父元素调用,删除直接子元素才有效,删除孙子元素就没有效果了。
replaceChild();   //删除一个子节点,并用一个新节点代替它,第一个参数为新建的节点,第二个节点为被替换的节点
cloneNode();      //克隆节点,参数true
document.getElementById("div1").style.backgroundColor="#fff";
登录后复制

相关学习推荐:javascript视频教程

以上就是JavaScript操作DOM的方法有哪些?的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号