HTML DOM 实例

最新推荐文章于 2022-02-20 03:40:06 发布
最新推荐文章于 2022-02-20 03:40:06 发布
阅读量107 收藏
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46399258/article/details/105339896
版权

HTML DOM 实例

文章目录


使用JavaScript访问和操作的HTML DOM对象的例子。

Document 对象

  1. 使用 document.write() 输出文本
  2. 使用 document.write() 输出 HTML
  3. 返回文档中锚的数目
  4. 返回文档中第一个锚的 innerHTML
  5. 返回文档中表单的数目
  6. 返回文档中第一个表单的名字
  7. 返回文档中的图像数
  8. 返回文档中第一个图像的ID
  9. 返回文档中的链接数
  10. 返回文档中的第一个链接的ID
  11. 返回文档中的所有cookies的名称/值对
  12. 返回加载的文档的服务器域名
  13. 返回文档的最后一次修改时间
  14. 返回加载的当前文档的URL
  15. 返回文档的标题
  16. 返回文档的完整的URL
  17. 打开输出流，向流中输入文本
  18. write() 和 writeln()的不同
  19. 用指定的ID弹出一个元素的innerHTML
  20. 用指定的Name弹出元素的数量
  21. 用指定的tagname弹出元素的数量

Anchor 对象

  1. 返回和设置链接的charset属性
  2. 返回和设置链接的href属性
  3. 返回和设置链接的hreflang属性
  4. 返回一个锚的名字
  5. 返回当前的文件和链接的文档之间的关系
  6. 改变链接的target属性
  7. 返回一个链接的type属性的值

Area 对象

  1. 返回图像映射某个区域的替代文字
  2. 返回图像映射某个区域的坐标
  3. 返回一个区域的href属性的锚部分
  4. 返回的主机名：图像映射的某个区域的端口
  5. 返回图像映射的某个区域的hostname
  6. 返回图像映射的某个区域的port
  7. 返回图像映射的某个区域的href
  8. 返回图像映射的某个区域的pathname
  9. 返回图像映射的某个区域的protocol
  10. 返回一个区域的href属性的querystring部分
  11. 返回图像映射的某个区域的shape
  12. 返回图像映射的某个区域的target的值

Base 对象

  1. 返回页面上所有相对URL的基URL
  2. 返回页面上所有相对链接的基链接

Button 对象

  1. 当点击完button不可用
  2. 返回一个button的name
  3. 返回一个button的type
  4. 返回一个button的value
  5. 返回一个button所属表的ID

Form 对象

  1. 返回一个表单中所有元素的value
  2. 返回一个表单acceptCharset属性的值
  3. 返回一个表单action属性的值
  4. 返回表单中的enctype属性的值
  5. 返回一个表单中元素的数量
  6. 返回发送表单数据的方法
  7. 返回一个表单的name
  8. 返回一个表单target属性的值
  9. 重置表单
  10. 提交表单

Frame/IFrame 对象

  1. 对iframe排版
  2. 改变一个包含在iframe中的文档的背景颜色
  3. 返回一个iframe中的frameborder属性的值
  4. 删除iframe的frameborder
  5. 改变iframe的高度和宽度
  6. 返回一个iframe中的longdesc属性的值
  7. 返回一个iframe中的marginheight属性的值
  8. 返回一个iframe中的marginwidth属性的值
  9. 返回一个iframe中的name属性的值
  10. 返回和设置一个iframe中的scrolling属性的值
  11. 改变一个iframe的src

Image 对象

  1. 对image排版
  2. 返回image的替代文本
  3. 给image加上border
  4. 改变image的高度和宽度
  5. 设置image的hspace和vspace属性
  6. 返回image的longdesc属性的值
  7. 创建一个链接指向一个低分辨率的image
  8. 返回image的name
  9. 改变image的src
  10. 返回一个客户端图像映射的usemap的值

Event 对象

  1. 哪个鼠标键被点击了？
  2. 被按下的键盘键的keycode？
  3. 鼠标的坐标？
  4. 鼠标相对于屏幕的坐标？
  5. shift键被按下了吗？
  6. 哪个元素被按下了？
  7. 哪个事件发生了？

Option 和 Select 对象

  1. 禁用和启用下拉列表
  2. 获得有下拉列表的表单的ID
  3. 获得下拉列表的选项数量
  4. 将下拉列表变成多行列表
  5. 在下拉列表中选择多个选项
  6. 弹出下拉列表中所有选项
  7. 弹出下拉列表中被选中的选项的索引
  8. 改变下拉列表中被选中的选项的文本
  9. 删除下拉列表中的选项

Table, TableHeader, TableRow, TableData 对象

  1. 改变表格边框的宽度
  2. 改变表格的cellpadding和cellspacing
  3. 指定表格的frame
  4. 为表格指定规则
  5. 一个行的innerHTML
  6. 一个单元格的innerHTML
  7. 为表格创建一个标题
  8. 删除表格中的行
  9. 添加表格中的行
  10. 添加表格行中的单元格
  11. 单元格内容水平对齐
  12. 单元格内容垂直对齐
  13. 对单个单元格的内容水平对齐
  14. 对单个单元格的内容垂直对齐
  15. 改变单元格的内容
  16. 改变单元格横跨的列数(colspan属性)
    在这里插入图片描述
X W F
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
dom操作插入html代码,DOM操作
weixin_34112399的博客
06-10 1776
dom对象的innerText和innerHTML有什么区别？innerText：innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容innerHTM：innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM123456elem.children和elem.ch...
监听 html dom 变化,如何监听页面 DOM 变动并高效响应
weixin_42244905的博客
06-07 1096
比来在做 chrome 插件开辟，既然是插件那就不免纰谬现有页面做一些控制，比如事宜监听、调剂构造、对 DOM 元素的增删改查等等。个中有一个需求比较有意思，便整顿一基层便把涉及到的常识点复习一遍。大年夜 DOM 更改事宜监据说起起首假设大年夜家已经知道 JavaScript 中事宜的产生阶段(捕获-射中-冒泡)，附上一张图带过这个内容，我们直接进入寻找解决办法的过程。Graphical rep...
HTML DOM 实例-Document 对象
dianbiao2276的博客
10-29 143
使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">document.write("Hello World!")</script></body></html> 使用 document.write() 向输出流写 HTML ...
html所有页面根的对象,HTML DOM全解和案例
weixin_33487490的博客
06-04 336
一、HTML DOM 节点在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点二、HTML DOM 节点树HTML DOM 将 HTML 文档视作树结构。...
dom实例
TaoYuan
04-24 5806
更改一个链接的文本、URL 及target<html> <head><script type="text/javascript"> function changeLink(){ document.getElementById('myAnchor').innerHTML="访问我的主页"; document.getElementById('myAnchor').
w3school HTML DOM实例
不积跬步无以至千里不积小流无以成江海
12-20 450
<br />w3school  HTML DOM实例
HTML DOM 导航
冷月醉雪的博客
05-16 1607
HTML DOM 节点列表    getElementsByTagName()方法返回节点列表。节点列表是一个节点数组。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello World!
前端调试DOM断点实例
bcbobo21cn的专栏
02-20 1905
前端调试DOM断点实例；
如何把dom转为html,JavaScript HTML DOM
weixin_39905816的博客
05-31 747
JavaScript HTML DOM - 改变 HTMLHTML DOM 允许 JavaScript 改变 HTML 元素的内容。改变 HTML 输出流JavaScript 能够创建动态的 HTML 内容：今天的日期是：在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。实例document.write(Date());尝试一下 »绝对不要在文档...
html dom remove,js中dom节点删除remove方法
weixin_32143245的博客
06-25 3046
本文教程操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。1、remove方法将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。绑定的事件是否同时被移除，删除自身(无参数时)，有参数时要根据参数所涉及的范围决定。2、使用语法strong.remove()3、使用参数选择器表达式，比如remove(“.class”);remov...
AngularJS 入门教程之HTML DOM实例详解
10-21
本文主要介绍AngularJS HTML DOM,这里帮大家整理了详细的资料,并附实例代码详细讲解,有需要的小伙伴可以参考下
JS添加或删除HTML dom元素的方法实例分析
10-17
主要介绍了JS添加或删除HTML dom元素的方法,结合实例形式分析了javascript针对HTML DOM元素节点的创建、追加、删除等相关操作技巧与注意事项,需要的朋友可以参考下
jQuery DOM操作实例
01-19
更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法...
dom-living-examples:一些原生JS操作DOM实例
05-25
dom-living-examples一些原生JS操作DOM实例
html 无缝轮播图完整代码
热门推荐
X W F
06-01 1万+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut
html布局 百分比自适应框架网页模板
X W F
05-30 1180
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自适应百分比HTML布局框架 CSS5</title> <style type="text/css"> body {font: 100% 宋体, 新宋体;background: #666666;margin: 0;
html与HTML5的区别
X W F
02-27 636
html与HTML5的区别 文章目录html与HTML5的区别文档的类型声明不同语义结构方面 文档的类型声明不同 html5:文档声明相对来说更为简便，有利于程序员快速阅读和开发。 语义结构方面 html:没有结构语义化的标签（通俗来讲就是不方便阅读，没有告诉你哪里是头，哪里是尾巴） html5:添加了许多具有语义化的标签， 使代码结构清晰，提高了代码的可读性。 下面是html5中的一些语义化标签...
HTML和CSS在文本创建液体填充动画效果
X W F
08-26 433
HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>用HTML和CSS在文本上如何创建液体填充动画效果？</title>
HTML与CSS如何创建悬停折角纸叠效果
X W F
08-20 337
折角折叠效果，在网站实际运用中也是非常多，当你将鼠标悬停在上面时，就会在某些网站上看到它的折角。在这里，我们仅用HTML与CSS来实现折角效果。 以下内容将具体讲解如何创建这个效果。在本文中，我们将文章分为两部分，在第一部分中，我们将创建基本结构。在第二部分中，我们将装饰结构。 首先，我们先使用HTML来创建一个转角折叠效果的结构。 在HTML代码中，我们将使用div标记创建一个基本div，并为其指定一个类名。 HTML代码如下： <!DOCTYPE html> <html lang="
vue3 获取子组件dom实例
最新发布
07-27
在Vue 3中，你可以使用`ref`和`$refs`来获取子组件的DOM实例。 首先，在父组件中，你需要在子组件上添加`ref`属性，如下所示： ```html <template> <div> <child-component ref="childRef"></child-component> </div> </template> ``` 然后，在父组件的JavaScript代码中，你可以通过`this.$refs`来访问子组件的实例，即`this.$refs.childRef`。你可以通过该引用来访问子组件的DOM实例，如下所示： ```javascript <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, mounted() { const childDOM = this.$refs.childRef.$el; // 使用childDOM进行相关操作 } } </script> ``` 在上述代码中，`this.$refs.childRef`将提供对子组件实例的引用。我们使用`$el`来访问子组件的DOM元素。 请注意，为了能够访问子组件的DOM实例，子组件必须已经被渲染并且挂载到父组件中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X W F

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值