位置: IT常识 - 正文

DOM学习详细笔记(dom常用方法)

编辑:rootadmin
DOM DOM document Object Model 文档对象模型 // 整个html文档,会保存一个文档对象document // console.log( document ); // 获取当前文档的对象 查找标签 直接查找 document.getElementsByTagName("标 ... DOM

推荐整理分享DOM学习详细笔记(dom常用方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:dom的知识点,dom基础知识,dom基本操作,dom教程,dom教程,dom教程,dom教程,dom基础知识,内容如对您有帮助,希望把文章链接给更多的朋友!

DOM document Object Model 文档对象模型

// 整个html文档,会保存一个文档对象document// console.log( document ); // 获取当前文档的对象

查找标签直接查找document.getElementsByTagName("标签名")document.getElementById("id值")document.getElementsByClassName("类名")

1、方法的返回值是dom对象还是数组

2、document对象可以是任意dom对象,将查询范围限制在当前dom对象

导航查找标签<div class="background"> <div class="c1"></div> <div class="c2"> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> </div></div><script> var c2 = document.getElementsByClassName("c2")[0]; var c4 = document.getElementsByClassName("c4")[0]; console.log(c2.parentElement); console.log(c2.children); console.log(c2.firstElementChild); console.log(c2.lastElementChild); console.log(c4.nextElementSibling); console.log(c4.previousElementSibling);</script>

css选择器document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素,返回标签对象(dom对象)document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组绑定事件???静态绑定<div id="div" onclick="foo(this)">click</div><script> function foo(self){ // 形参不能是this; console.log("foo函数"); console.log(self); }</script>动态绑定

在js中通过代码获取元素对象,然后给这个对象进行后续绑定。

<p id="i1">试一试</p></div><script> var ele = document.getElementById("i1"); ele.onclick = function () { console.log("ok"); console.log(this); //可以直接用this };</script>

一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码

多个标签的事件绑定

<ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li></ul><script> var eles = document.querySelectorAll("ul li"); for(var i=0;i<eles.length;i++){ eles[i].onclick = function (){ console.log(this.innerHTML) //innerhtml输出的东西就是标签里面的内容 // console.log(eles[i].innerHTML) // 结果? } }</script>

this.innerhtml我们也可以进行修改,假设在点击之后列表的中的元素要改为“ivanlee”+原内容

for(var i=0;i<eles.length;i++){ eles[i].onclick = function (){ this.innerHTML = 'ivanlee'+this.innerHTML;

经过点击之后

操作标签<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>文本操作<div id="i1"> <span>ivanee</span></div><script> var ele = document.getElementById("i1"); ele.onclick = function () { console.log(this.innerHTML); console.log(this.innerText); }</script>

还可以有双击鼠标事件:

ele.ondblclick = function () { this.innerHTML = "<a href='http://www.baidu.com'>ivanlee</a>"; innerhtml里存放了一个新的超链接标签,双击可以出发此链接}

当双击鼠标之后,页面显示变为一个带有超链接标签的ivanlee,此时点击就可以进入百度搜索栏

但是如果换做是innertext则不会有任何的反应

ele.ondblclick = function () { this.innertext = "<a href='http://www.baidu.com'>ivanlee</a>"; innerhtml里存放了一个新的超链接标签,双击可以出发此链接}DOM学习详细笔记(dom常用方法)

innerHTML和innertext的区别

1) innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身)

2) outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身)

3) innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身)

4) outerText设置或获取标签自身及其所包含的文本信息(包括自身)

innerText和outerText在获取的时候是相同效果,但在设置时,innerText仅设置标签所包含的文本,而outerText设置包含包括标签自身在内的文本。

value操作

像input标签,select标签以及textarea标签是没有文本的,但是显示内容由value属性决定

<input type="text" id="i1" value="ivan"> <textarea name="" id="i2" cols="30" rows="10">123</textarea> <select id="i3"> <option value="hebei">河北省</option> <option value="hubei">湖北省</option> <option value="guangdong">广东省</option> </select><script> // input标签 var ele1 =document.getElementById("i1"); console.log(ele1.value); ele1.onmouseover = function (){ this.value = "ivanlee"; 鼠标悬停就会触发事件 } // textarea标签 var ele2 =document.getElementById("i2"); console.log(ele2.value); ele2.onmouseover = function (){ this.value = "welcome to JS world!" } // select标签 var ele3 =document.getElementById("i3"); console.log(ele3.value); ele3.value= "hubei"</script>css样式操作<p id="i1">Hello world!</p><script> var ele = document.getElementById("i1"); ele.onclick = function (){ this.style.color = "red" }</script>

属性操作 <div id="d1" k1="k" k2="k2"> </div> <script> var ele = document.getElementById("d1"); console.log(ele); >>> <div id="d1" k1="k" k2="k2"> console.log(ele.getAttribute("k1")); >>> k ele.setAttribute("k1","k1"); console.log(ele); >>><div id="d1" k1="k1" k2="k2"> ele.removeAttribute("k1"); console.log(ele); </script>

并不是所有属性都可以像value那样操作。

class属性操作elementNode.classNameelementNode.classList.addelementNode.classList.remove练习 京东tab页面切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ivanlee</title> <link rel="shortcut icon" href="https://www.cnblogs.com/ivanlee717/p/f.ico"> <style> .tab{ width: 800px; height: 500px; margin: 200px auto; } .tab ul{ list-style: none; z-index: 1; padding: 0; margin: 0; } .tab .tab-title{ background-color: #f7f7f7; border: 1px solid #eee; border-bottom: 1px solid #e4393c; font-family: "Microsoft Sans Serif"; display: inline-block; } .tab .tab-title li{ display: inline-block; padding: 10px 25px; font-size: 14px; } li.current{ background-color: #e4393c; color: #fff; cursor: default; } .hide{ display: none; } </style></head><body><div class="tab"> <ul class="tab-title"> <li class="current" index="0">商品介绍</li> <li class="" index="1">规格与包装</li> <li class="" index="2">售后保障</li> <li class="" index="3">商品评价</li> </ul> <ul class="tab-content"> <li>商品介绍...</li> <li class="hide">规格与包装...</li> <li class="hide">售后保障...</li> <li class="hide">商品评价...</li> </ul></div><div class="background"></div><script> var _titles = document.querySelectorAll(".tab .tab-title li"); var _content = document.querySelectorAll(".tab .tab-content li"); for (var i=0; i<_titles.length;i++){ _titles[i].onclick = function(){ for (var j=0; j <_titles.length;j++){ _titles[j].classList.remove("current"); } this.classList.add("current"); var _index = this.getAttribute("index"); for (var k=0; k <_content.length;k++){ _content[k].classList.add("hide"); } _content[_index].classList.remove("hide"); } }</script></body></html>

节点操作// 创建节点:document.createElement("标签名")// 插入节点somenode.appendChild(newnode) // 追加一个子节点(作为最后的子节点)somenode.insertBefore(newnode,某个节点) // 把增加的节点放到某个节点的前边// 删除节点somenode.removeChild():获得要删除的元素,通过父元素调用删除//替换节点somenode.replaceChild(newnode, 某个节点);<button class="add_btn">添加节点</button><button class="del_btn">删除节点</button><button class="replace_btn">替换节点</button><div class="c1"> <h3>hello JS!</h3> <h3 class="c2">hello world</h3></div>

添加和插入节点

var add_btn = document.querySelector(".add_btn");var c1 = document.querySelector(".c1");var c2 = document.querySelector(".c2");add_btn.onclick = function () { // 创建节点 var ele = document.createElement("img"); // <img> ele.src = "https://img2.baidu.com/it/u=3312360479,315254076&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" console.log(ele); // 添加节点 c1.appendChild(ele); 第一种 c1.insertBefore(ele, c2) 第二种}

第一种是插入到最后

第二种是插入到某个子节点的前面

删除节点

del_btn.onclick = function () { // 删除子节点 c1.removeChild(c2); };

替换节点

replace_btn.onclick = function () { // 创建替换节点 var ele = document.createElement("img"); // <img> ele.src = "https://www.yuucn.com/wp-content/uploads/2022/03/1648645331-ccb34a595cb926f.png" console.log(ele); // 替换节点 c1.replaceChild(ele, c2); }

常用事件onload<script> window.onload = function () { ele = document.getElementById("i") console.log(ele.innerHTML); } </script></head><body><div class="background"> <div id="i">ivanlee</div></div>

window.onload的方法解决了js在从上到下编译的时候,无法先解析body里面的内容,后解析

本文链接地址:https://www.jiuchutong.com/zhishi/303784.html 转载请保留说明!

上一篇:phpwind和discuz的简单对比(php windows)

下一篇:《笨办法学Python3 》PDF高清版入坑必备!!!(笨办法学python 3电子书下载)

  • 缴纳个人所得税还算应届毕业生吗
  • 财会英语汇总:税收术语?
  • 已认证的专票可以取消认证吗
  • 房地产房屋质量检测
  • 房租确认后能不退押金吗
  • 残疾人就业保障金
  • 财务报表的资产负债表怎么填
  • 预算会计工资是应发工资还是实发工资
  • 外购商品用于赠送分录
  • 政策信息咨询服务要到哪个部门办理资质
  • 金融业的企业
  • 过路费报销单怎么填写图片
  • 收票据计息利息为什么要红字冲账?
  • 无形资产原值变动账务处理
  • 企业员工福利费管理制度内容
  • 报无票收入又开发票了怎么办?
  • 项目上发生伙食问题
  • 保证金逾期退还
  • 防洪费2019年税率
  • 零售汽油费发票需要交印花税吗?
  • 活动策划税费
  • 住宿业的配套服务有哪些
  • 暂估入账没有调增,以后年度怎么调整
  • 金融企业呆账准备金是否允许补提
  • 汇总转账凭证可以是一借多贷
  • 同一控制亏损企业怎么算
  • 发票已开货没发出的账务处理?
  • 固定资产清查表
  • win10桌面网络图标怎么调出来
  • win10玩游戏时弹出error
  • Win10系统如何修改开机密码
  • 异地项目不预缴税款可以开票吗
  • 艾叶泡脚的方法和注意事项
  • linux中cut命令详解
  • 最常用的成本核算方法表
  • 企业支付银行的贷款利息可以税前扣除吗为什么
  • 分期收款销售商品纳税义务发生时间
  • 代扣代缴企业所得税账务处理
  • php管理员和用户登录
  • php第三方包
  • 解决跨域问题的注解
  • htmlspecialchars_decode
  • php接收post
  • 货款收不回来了怎么做账
  • 员工体检费计入福利费吗
  • 认证发票可以分两次进行吗
  • mysql主从同步的优点
  • mongodb基本使用
  • 无偿赠送怎么做账
  • mysql更新语句
  • sqlserver2019配置
  • 重复报销怎么写情况说明
  • 主营业务收入明细科目
  • 所得税退税可以不退吗
  • 以前年度损益调整结转到哪里
  • 坏账准备计提方法一经确定不得随意变更这种做法体现了
  • 以前年度未处理往来账怎么叫
  • 宾馆购买的床财务怎么做账
  • 贴现利息收入的账务处理
  • 个人所得税不允许核定的行业
  • 未开票收入如何申报
  • 给员工发中秋福利的用词
  • 原材料暂估的业务包括
  • 负债类科目分录
  • 我国开征股票交什么税
  • sql2000卸载干净
  • ubuntu fsl
  • centos virsh
  • diskgenius分区linux
  • 电脑关机没反应怎么办出现一个对话框
  • win7系统如何关闭开机自动启动软件
  • 微软新品什么时候上市
  • mmtray2k.exe有什么作用 是什么进程 mmtray2k进程查询
  • 启用win8 metro启动界面
  • 批处理for命令修改后缀名
  • jquery遍历数组的方法
  • 陕西电子税务局新版
  • 智行火车票电子报销凭证
  • 国家税务总局23号文件
  • 宁波税务干部学校
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设