文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

文档对象模型

1998年10月DOM1级规范成为W3C的推荐标准，为基本的文档结构以及查询提供了接口。但是要注意，IE中的所有DOM对象都是以COM对象的形式实现的。...这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。...节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。 1) Node类型 DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。...访问时可以通过中括号访问，也可以通过item()方法访问。 parentNode 指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点，每个节点之间都是同胞/兄弟节点。...getElementsByTagName() 参数为要取得元素的标签名，返回包含0个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似

1.1K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    面向对象版tab 栏切换

    x绑定点击事件 this.remove[i].onclick = this.removeTab; 获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容 removeTab(e)...].ondblclick = this.editTab; this.sections[i].ondblclick = this.editTab; 在双击事件处理文本选中状态,修改内部DOM节点,...2.第一步:创建新的选项卡li和新的内容section 3.第二步: 把创建的两个元素追加到对应的父元素中. 4.以前的做法:动态创建元素createElement , 但是元素里面内容较多,需要...innerHTML赋值在appendChild 追加到父元素里面. 5.现在高级做法:利用insertAdjacentHTMLO可以直接把字符串格式元素添加到父元素中 6.appendChild不支持追加字符串的子...愫, insertAdjacentHTML支持追加字符串的元素

    2K30

    面向对象版tab 栏切换

    :创建新的选项卡li和新的内容section 第二步:把创建的两个元素追加到对应的父元素中....以前的做法:动态创建元素createElement ,但是元素里面内容较多,需要innerHTML赋值在appendChild 追加到父元素里面....现在高级做法:利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中 appendChild不支持追加字符串的子元素, insertAdjacentHTML支持追加字符串的元素...x绑定点击事件 this.remove[i].onclick = this.removeTab; 获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容 removeTab(e)...; 在双击事件处理文本选中状态,修改内部DOM节点,实现新旧value值的传递 editTab() {    var str = this.innerHTML;    // 双击禁止选定文字

    3.9K30

    JQuery高级

    比如子级有单击事件，那么父级如果有单击事件也会被触发，父级的父级如果有单击事件也会被触发。 任何一个操作，计算机或者浏览器都会去处理。不管你有没有设置对应的事件。...> 3.事件委托 把子级的事件委托给父级（父：最近的能包含住将来发生事件的所有子级）------ 事件代理 .delegate(真实发生事件的目标，字符串事件属性，匿名函数去写命令function()...通过程序追加的标签叫做未来元素。...最终是通过js内置的结构化表现手法，将网页中的所有html节点查找到，然后实现一个倒置的树状结构图，这个树状结构图就叫DOM树。...(目的地) prepend()向前面加 prependTo(目的地) 父级加： after()在同级的后面加 insertAfter(目的地)在同级的后面加 before()在同级别的前面加 insertBefore

    1.5K50

    04-老马jQuery教程-DOM节点操作及位置和大小

    语法结构： jQuery(html, [props]) 参数: html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。...fn(index,html):返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。...，只不过一个是在最后追加子节点，一个是在最前面追加子节点（prev vs after) 2.2 追加到appendTo(content)方法 参数：content： 用于被追加的内容选择器，String...参数: html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素 element， Element类型，用于包装目标元素的DOM元素。...函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。

    2.2K90

    第75天：jQuery中DOM操作

    删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’) 二、动态创建Dom节点 1....$(html字符串) 使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象。 然后调用可以append等方法将新创建的节点添加到Dom中。...三、追加（父元素.append（子元素）） 1.添加小儿子  append append方法用来在元素的末尾追加元素（最后一个子节点）。...(兄弟) 四、将自己追加到某元素（子元素.appendTo（父元素）） 1.成为小儿子  appendTo 子元素.appendTo(父元素);//主动巴结!.../*注意：一个参数是获取，两个参数是设置*/ 2.追加样式 追加样式addClass("myclass")(不影响其他样式) 这里说的样式，是css中写好的。

    84820

    04-老马jQuery教程-DOM节点操作及位置和大小

    语法结构： jQuery(html, [props]) 参数: html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。...fn(index,html):返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。...参数: html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素 element， Element类型，用于包装目标元素的DOM元素。...DOM中删除所有匹配的元素。...Number: 设定CSS中 'height' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。

    6.1K00

    Web APIs第三天

    节点类型: 元素节点 • 所有的标签 比如 body、 div • html 是根节点 属性节点 • 所有的属性 比如 href 文本节点 • 所有的文本 重点记住元素节点, 可以更好的让我们理清标签元素之间的关系...追加节点 要想在界面看到, 还得插入到某个父元素中 1....插入到父元素中某个子元素的前面: num1.insertBefore(num2, num1.children[0]) 3....删除节点 若一个节点在页面中已不需要时，可以删除它 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除 如不存在父子关系则删除不成功 删除节点和隐藏节点（display:none）...删除留言操作 放到追加的前面 // 在事件处理函数里获取点击按钮 注册点击事件 // 易错点: 必须在事件里获取 外面获取不到 // 放到追加ul的前面 创建元素同时顺便绑定了事件 let

    58850

    继续死磕前端

    () //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp...（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。...答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。...操作 Dom 操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况： 1、移动现有标签的位置 2、将新创建的标签插入到现有的标签中 创建新标签 var $div = $(''

    2.8K10

    再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

    () 返回给定位置的CSS属性的名称 style.length style代码块中参数个数 style.getPropertyValue() 返回给定属性的字符串值 style.getPropertyPriority...文本长度 createTextNode() 创建文本 normalize() 删除文本与文本之间的空白 splitText() 分割 appendData() 追加 deleteData(offset...、innerHTML、outerHTML、outerText innerText: 表示起始标签和结束标签之间的文本   innerHTML: 表示元素的所有元素和文本的HTML代码   outerText...document.documentElement 代表页面中的html>元素 document.body 代表页面中的元素 document.doctype 代表html 转载本站文章《再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查》, 请注明出处：https://www.zhoulujun.cn/html

    1.2K20

    C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

    获取元素节点信息常用属性： 名称 描述 innerHTML 返回元素内包含的所有HTML内容（文本和标签），类型为字符串 parentNode 返回指定节点的父节点 children 返回指定元素的子元素节点集合....________.parentNode 答案：parentNode 观察元素结构可知，div元素为span元素的父级的父级，使用parentNode即可返回指定节点的父节点，父级的父级即为...如果修改内容中包含html字符串会被解析成html元素 setAttribute(name,value) 设置指定元素上的某个属性值。...() 将html字符串写入到文档中 （1）在div中插入文字内容为“加油，我要通过C认证”的p元素，请补全横线处代码。...，插入的值为字符串，所以需要使用可以解析html字符串的DOM属性，返回元素中的html内容。

    2K20

    如何优化前端页面 如何优化网页

    3.3.8 对盒模型设置时，子级的margin（顶部）通常会影响父级样式，因此，在父子之间的间距使用父级的内边距撑开，兄弟级别标签之间的距离可采用外边距。...4.1.8 对于DOM操作，尽可能减少在页面中查找元素的次数，即用变量存储查找的元素，之后再需使用，只需要使用变量即可（for循环中常见的长度控制，同理）。...4.2.3 追加字符串时，采用 str += "独行冰海"; 而不是str = str + "独行冰海"; 4.3 页面基本数据交互 4.3.1 获取标签使用最为快捷的方法，在PC端原生方法当中，速度比较如下...4.3.3 原生当中，一个元素一种事件只能绑定一次。 4.3.4 可以通过事件委托，减少页面中类似事件的数量。 4.3.5 在删除dom节点之前，需要先移除掉该节点上的事件。...4.4.3 在DOM节点相关操作上进行优化，如利用变量存储查找到的元素，从而防止每次查找时进行页面重绘、利用文档碎片等。 4.4.4 尽可能减少页面中dom元素样式的修改，防止页面回流与重绘。

    2.5K80

    100个最常问的JavaScript面试问答-第2部分（共10部分）

    当浏览器第一次读取（解析）HTML文档时，它会创建一个大对象，基于HTML文档的真正大对象就是DOM。 它是从HTML文档建模的树状结构。 DOM用于交互和修改DOM结构或特定的元素或节点。 中的所有HTML元素 JavaScript可以更改页面中的所有HTML属性 JavaScript可以更改页面中的所有CSS样式 JavaScript可以删除现有的HTML...元素和属性 JavaScript可以添加新的HTML元素和属性 JavaScript可以对页面中所有现有的HTML事件做出反应 JavaScript可以在页面中创建新的HTML事件 问题12.请说明attributes...在“冒泡阶段”中，事件冒泡或向上传播至父级，祖父级，祖父的父级，直到到达窗口为止；而在“捕获阶段”中，事件从窗口开始向下直到触发元素事件或event.target。 此过程称为事件传播。...在Bubbling Phase中，事件冒泡，或者到达父级，祖父级，祖父的父级，直到到达窗口为止。

    1.1K31

    DOM 节点遍历：掌握遍历 XML文档结构和内容的技巧

    ，输出节点名称和文本节点的节点值浏览器中 DOM 解析的差异浏览器之间存在一些差异。...XML DOM - 导航节点可以使用节点之间的关系来导航节点。导航 DOM 节点通过节点之间的关系在节点树中访问节点，通常被称为"导航节点"。...中的节点树的一部分以及节点之间的关系：DOM - 父节点所有节点都有一个父节点。...getAttribute() 方法返回属性的值。获取元素的值在 DOM 中，一切都是节点。元素节点没有文本值。元素节点的文本值存储在子节点中，这个节点被称为文本节点。...更改元素的值在 DOM 中，一切都是节点。元素节点没有文本值。元素节点的文本值存储在子节点中，这个节点被称为文本节点。要更改元素的文本值，必须更改元素的文本节点的值。

    14510

    JS简单页面交互实战 - 点击按钮实现求和功能

    上一期堡堡给大家讲解了简单的页面交互效果 - 点击块，让块动起来，让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块，让块动起来，可以回复“交互”到“HTML5学堂”公众号。...在局部作用域当中出现变量的时候，首先查找当前的作用域中是否具有存储空间，如果有则直接采用，如果没有需要向父级进行查找，如果父级没有，继续向上，直到找到window为止，如果window下也不存在该空间，...3 第二步：仔细查看功能，并根据基本功能构建结构样式 标签选择分析： 在功能描述中“将两个文本框中输入的数字进行加和运算”，可以让用户提交数据的标签也只能是表单元素，在这边明显是input元素； 为了优化...input元素的用户体验，使用label元素来扩大聚焦的点击区域，也就是说点击label元素光标会自动聚焦到input元素里面； 在功能描述中“用鼠标点击‘按钮’时”，按钮我们是使用了input类型的按钮...“按钮” 网页中存在着各种标签，需要利用document.getElementById(id)方法获取“按钮”元素，才能针对“按钮”元素进行相应的操作； 鼠标点击“按钮”，需要为“按钮”元素绑定点击事件

    17.7K80

    VueJs中如何使用Teleport组件

    比较常见的应用场景:就是全屏的模态框,控制元素的位置,也是可以处理的,但是比较麻烦 在理想情况下,我们希望在具体的组件中,给元素绑定的事件,与具体要控制的DOM元素结构在同一个组件中,具体的位置处,保持一定的相关联性...,里面存在着控制弹框的显示和隐藏的逻辑,当嵌套的组件比较深,复杂时 如果父级元素存在定位,那在控制子元素的位置时,用css的transform或者position:absolute,参照对象的变更,会破坏布局结构...to 的值可以是一个 CSS 选择器字符串，或id,也可以是一个 DOM 元素对象。...这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方 位置移动了,提现在结构模板上,但是数据逻辑依旧存在关联的 04 如何禁用...对于此类场景，多个 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上 比如下面这样的用例 <Teleport to=".content

    2.3K20

    JQuery_

    提交表单 表单验证 规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡 作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上...，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...(单纯给未来元素绑定命令 $(‘li’).on(事件属性,匿名函数)) DOM操作(节点操作) DOM: 网页文档的根/根标签 追加节点:同级追加和自己追加(前面 后面) 步骤: 声明变量保存的节点数据...使用追加函数追加节点 子级追加: append()和appendTo()：在现存元素的内部，从后面放入元素 prepend()和prependTo()：在现存元素的内部，从前面放入元素 父级追加: after...()和insertAfter()：在现存元素的外部，从后面放入元素 before()和insertBefore()：在现存元素的外部，从前面放入元素 删除节点:remove()或empty() $

    72510

    JQuery

    (); //选择id是box的元素的父元素 $('#box').children(); //选择id是box的元素的所有子元素 $('#box').siblings(); //选择id是box的元素的同级元素...提交表单 表单验证 规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡 作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上...(单纯给未来元素绑定命令 $(‘li’).on(事件属性,匿名函数)) DOM操作(节点操作) DOM: 网页文档的根/根标签 追加节点:同级追加和自己追加(前面 后面) 步骤: 声明变量保存的节点数据...使用追加函数追加节点 子级追加: append()和appendTo()：在现存元素的内部，从后面放入元素 prepend()和prependTo()：在现存元素的内部，从前面放入元素 父级追加: after...()和insertAfter()：在现存元素的外部，从后面放入元素 before()和insertBefore()：在现存元素的外部，从前面放入元素 删除节点:remove()或empty() $

    96021
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券