JavaScript DOM 对象深入了解

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了JavaScript DOM 对象深入了解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

查找元素

1、直接查找

方法名获取有指定惟一ID属性值文档中的元素标记名的子元素的数组属性获取标签集合属性值，属性由name指定

document.getElementById('id')

<script type="text/javascript">
var i = document.getElementById('zhang'); //查找指定的id
i.innerText = '很帅'; //innerText修改指定的字符串

显示效果，当我们打开IE的时候不帅就会被修改为很帅

2>getElementsByTagName_r(name)

<script type="text/javascript">
var i = document.getElementByTagNmae('zhang'); //查找指定的name名
i.innerText = '很帅'; //innerText修改指定的字符串

其显示效果一样

3>document.getElementsByClassName

<script type="text/javascript">
var i = document.getElementClassName('zhang'); //查找指定的class名
i.innerText = '很帅'; //innerText修改指定的字符串

2、间接查找

属性名IoUsSibling标签元素标签标签元素标签元素标签元素IoUsElementSibling标签元素

有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

操作元素

1、动态创建内容时所用的W3C DOM属性和方法

属性/方法 描述方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素方法会创建一个包含静态文本的节点.appendChild(childNode)方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。.setAttribute(name,value)方法分别获得和设置元素中name属性的值.insertBefore(newNode,targetNode).removeAttribute(name)方法从元素中删除属性name.removeChild(childNode)方法从元素中删除子元素childNode.replaceChild(newNode,oldNode)方法将节点oldNode替换为节点newNode.hasChildnodes()方法返回一个布尔值，指示元素是否有子元素

2、标签内容

获取标签文本内容 innerHTML 获取HTML内容 value 获取值，即form提交表单的值

即实例如下：

document.getElementsByClassName("zhang").innertext = 123; // 获取类名为zhang的标签并把内容改为123 document.getElementsByClassName("yan").innerHTML = 456; //获取类名为yan的标签并把内容改为456 document.getElementsByClassName("lin").value = "张岩林很帅"; //获取类名为lin的标签并把内容改为张岩林很帅

3、属性

获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性

通过自定义属性可以做一个全选，反选，取消选择的案例，代码如下：

<Meta charset="UTF-8"> Title
  • Box" value="1" class="c1">篮球
  • Box" value="2" class="c1">足球
  • Box" value="3" class="c1">排球
    • 全选、反选、取消案例

    注：onclick是属于点击事件，后面会提到

    4、class操作

    获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类

    这个东西的用处很大，比如京东里面，当我们鼠标放到全部商品的时候，下面就出现好多商品，其商品是属于隐藏的，触发事件以后他才显示出来，其中间的操作就是定义了一个css隐藏属性，鼠标放上去后，移除CSS隐藏属性；鼠标移走又把隐藏属性给添加上去。

    Meta charset="UTF-8"> 隐藏

    <span onmouSEOver="mouOver();" onmouSEOut="mouOut();">放这上面有东西出来，不放东西又消失
    <div class="hide" id = "zhangyanlin" style="font-size: 60px">张岩林好帅

    来个案例醒醒脑

    5、标签操作

    标签，添加到指定位置，下面给大家举两种方法来操作标签

    //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

    // 方式二
    var tag = document.createElement('div')
    xxx.appendChild(tag) //往后追加一个div元素
    xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根据索引

    <Meta charset="UTF-8"> Title
    alex
  • eric
    • 添加标签操作案例

    6、样式操作

    张岩林很帅

    效果如下：

    来个案例吧，光看知识点多没劲，我们经常会看到输入框里面有那种颜色比较暗的字体，提示你让你输入东西，当你点进去的时候他就消失了，很神奇的操作，他就是通过dom来实现的，废话不多说直接撸码

    <Meta charset="UTF-8"> Title 内容" onfocus="inpAtu(this);" onblur="onBtu(this);"> input输入框提示

    7、位置操作

    当前文档占屏幕高度
    document.documentElement.clientHeight

    自身高度
    tag.offsetHeight

    距离上级定位高度
    tag.offsetTop

    父定位标签
    tag.offsetParent

    滚动高度
    tag.scrollTop

    看到这些大家有没有想到网页右下角有个返回顶部，一点就返回到上面了，对没错就是计算这些高度；还有当你鼠标往下拉的时候，左边菜单栏相对应的样式都会变。

    Meta charset="UTF-8"> logo">
    • 第1张
    第2张
    第3张
    第一章
    第二章
    第三章
    滚动菜单
    <Meta charset="UTF-8"> Title 张岩林
    返回顶部
    返回顶部

    8、其他操作

    输出框 alert 弹出框 confirm 确认框

    // URL和刷新
    location.href 获取URL
    location.href = "url" 重定向
    location.reload() 重新加载

    // 定时器
    setInterval 多次定时器
    clearInterval 清除多次定时器
    setTimeout 单次定时器
    clearTimeout 清除单次定时器

    给说下定时器吧，定时器比较有用，比如当我们删除一个邮件的时候，会发现弹出一段对话，邮件已删除，这个是单次定时器，多次定时器在自己特定需求的时候，可以用到

    function Interval() { s1 = setInterval(function () { console.log(123) //持续输出123 },500); s1 = setInterval(function () { console.log(123) },500); } function StopInterval() { clearInterval(s1); //清除一个多次定时器 }

    单次定时器

    删除" onclick="Delete();">

    事件

    <Meta charset="UTF-8"> Title

    // 普通事件
    <button id = "btn1" onclick="func();">按钮

    // 0级处理事件
    <button id = "btn2">0级处理按钮

    // 2级处理事件
    <button id = "btn3">2级处理按钮

    <button id = "btn4">完整兼容按钮

    事件列表：

    属性内容被修改用户点击某个对象时调用的事件句柄（比点击input标签时执行上面的代码例子）用户双击某个对象时调用的事件句柄错误键盘按键被按下键盘按键被按下并松开键盘被松开页面或一副图片完成加载SEOutSEOver用户退出页面

    注：一个标签可以绑定多个事件，this标签当前正在操作的标签，event封装了当前事件的内容。

    来几个案例吧，不然看完了感觉跟没看一个样

    <Meta charset="UTF-8"> Title
    • 标签菜单案例
    <Meta charset="UTF-8"> Title
    通过自定义属性改变元素值

    以上这篇JavaScript DOM 对象深入了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

    javascript的dom对象

    猜你在找的JavaScript相关文章

    Javascript中的事件冒泡与捕获
    事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
    搞懂js中小数运算精度问题原因及解决办法
    js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
    搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
    什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
    前端对base64编码的理解，原生js实现字符base64编码
    @ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
    搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
    搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
    js判断浏览器是否支持webGL
    起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
    js判断undefined和null
    js判断undefined js判断null js判断null和undefined
    将文字自动转为banner打印形式的工具
    http://patorjk.com/software/taag/
    聊一聊 bootstrap 的轮播图插件
    今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
    js实现图片无缝循环跑马灯
    html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作