WEB程序员学习JS快速指南 --DOM

最新推荐文章于 2024-09-06 10:56:43 发布
最新推荐文章于 2024-09-06 10:56:43 发布
阅读量461 收藏
点赞数
分类专栏： Java 文章标签： web xml javascript border input table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amos_tl/article/details/2456257
版权

1 JS DOM 编程

JS 访问HTML,XML

NODE对象

节点类型:

元素 Element  1

属性 Attribute 2

文本 Text 3

注释 Comment

CDATA CDATASection

处理指令  ProccessingInstruction

根结点 Document

实体 Entity

示例:

-------------------------------------------------------------------------------------------------------------------

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>输出节点属性</title>

</head>

<body>

<table width="80%" border="1" >

<thead><th>姓名</th><th>年龄</th> </thead>

<tr align="left"> <td>张三</td> <td> 25</td> </tr>

</table>

<script language="javascript">

  document.write("root node:"+document.childNodes[0].nodeName+"<br>");

  document.write("root node first child:" + document.childNodes[0].firstChild.nodeName+"<br>");

  document.write("root node last child:"+ document.childNodes[0].lastChild.nodeName +"<br>");

  document.write("body node first child:" + document.body.childNodes[1].nodeName + "<br>");

  document.write("body node second child node type:" + document.body.childNodes[1].nodeType + "<br>");

</script>

</body>

</html>

 

2.XML解析器

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

加载XML到解析器

xml.load("data.xml");

xml.loadXML("xml str");

3.XML加入到HTML

a.内嵌

<xml id='"data">

<?xml version="1.0">

<root>

 <child>text</child>

</root>

</xml>

b.引入外部XML文件

<xml id="data" src="data.xml" />

使用数据(绑定数据)

datasrc=#id datafld=child

可与<table> <span> <div> 等元素绑定.

4.DOM API

DOM将整个文档展现为内存中的一棵树.树由节点组成.可以使用JS 来操作这棵树的节点.

getElementByTagName()  返回指定名称的元素集合

var oList = doucment.getElementByTagName("input");

var oList = doucment.getElementByTagName(" * ");

返回所有元素节点.

oList[0].nodeName

oList.item()

oList.length

getElementById() 返回指定id属性值对象.

var o=document.getElementById("idvalue");

getElementsByName() 返回指定name的属性值相等的元素对象数组

getAttribute(name) 返回名为name的属性值

setAttribute(name,value) 设置指定名为name属性的值为value.

5.DOM 事件

Event对象 event

Style style

 

 

 

 

 

amos_tl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2017年Web程序员技能树成长指南
08-11
《2017年Web程序员技能树成长指南》是一份针对Web开发者的综合学习路径，旨在帮助他们系统地提升在JavaScript开发领域的技能。这份指南涵盖了众多相关领域，旨在为开发者提供一个全面的学习框架，以便他们在快速发展...
一份JavaScript程序员的学习指南
08-10
这份"JavaScript程序员的学习指南"旨在为初学者和有经验的开发者提供一个全面且深入的资源集合，帮助他们在JavaScript的世界中不断成长。下面，我们将详细探讨这个主题，并围绕这个指南的结构展开一系列的知识点讲解...
learning-resource：列出一些优秀的程序员学习资源
02-03
学习JavaScript包括理解其语法、DOM操作、异步编程（如Promise和async/await）、以及框架如React、Angular和Vue.js。 2. **MySQL**：作为最广泛使用的SQL数据库系统之一，MySQL的学习涉及SQL查询语句、数据库设计、...
javaScript-API-特效
03-23
"JavaScript权威指南第五版.chm"是一本经典的JavaScript学习资料，它可能覆盖了从基础语法到高级特性的全面内容，包括变量、数据类型、函数、作用域、闭包、原型链、模块化、异步编程等。这本书对于深入理解...
java fastxml json 科学计数法转换处理
lliinnhhhan的博客
09-01 421
由于 canal 切换为 tx dbbridge后，发现dbbridge对于canal的兼容性存在较大问题，从而引发 该文档的实践。就目前发现 dbbrige 的字段 大小写 和 数据类型格式 从binlog 写入kafka 同canal 都会存在差异。canal之前导出都是小写，但是dbbrige接出来后部分字段名大写，部分字段名小写。另外就是 数据格式 毕竟是 java 侧的所以 容易出现一些 科学计数法转换问题。但是如果 大boss 的意思 硬要换，那 咋 还有啥说的。
java xml 转json json 转 json对象
Rockandrollman的博客
09-02 632
如果你的XML数据对应着特定的Java类，你也可以先解析XML到Java对象，然后再将对象转换为JSON。这种方法的好处是灵活，特别是当你处理的是结构未知或复杂的XML数据时。在Java中，将JSON字符串转换为JSON对象通常意味着将字符串解析为一个可以在程序中操作的数据结构，比如。（或直接转换为你的Java对象，如果你定义了相应的类的话），然后再将其转换为JSON字符串。首先，你需要在你的项目中引入Jackson的XML和核心库。到JSON的转换不是直接支持的，你需要先解析XML到对象或。
xml转txt，适应各种图片格式，如jpg，png，jpeg，PNG，JPEG等
weixin_45734021的博客
09-03 348
xml转txt，适应各种图片格式，如jpg，png，jpeg，PNG，JPEG等。
深入理解XML与JSON：数据交换格式的比较与应用
apple_64847327的博客
09-02 743
XML和JSON都是强大的数据交换格式，它们各自有其独特的优点和适用场景。XML的灵活性和自描述性使其在需要复杂数据结构和文档标记的场景中非常有用。而JSON的简洁性和与JavaScript的兼容性使其在Web开发和移动应用开发中非常流行。在实际开发中，了解这两种格式的特点和限制对于设计有效的数据交换策略至关重要。希望这篇文章能帮助你更好地理解XML和JSON，并在适当的场景中选择最合适的数据交换格式。
Android 下的 XML 文件（概念理解、存储位置理解）
weixin_52173250的博客
09-02 854
XML（Extensible Markup Language，可扩展标记语言）是一种用于存储和传输数据的标记语言类似于 HTML，但旨在传输和存储数据，而不是显示数据，且基本语法都是标签。
【Protobuf】xml、json与protobuf有什么区别，protobuf详解（保姆篇）
A的博客
09-02 800
Protocol Buffers（简称 Protobuf）是 Google 开发的一种语言中立、平台中立、可扩展的序列化结构数据的机制。它主要用于将数据结构序列化为二进制格式，以便于高效传输和存储。Protobuf 在性能、文件大小和数据兼容性方面有着显著的优势。Protobuf 适用于多种编程语言，包括 C++、Java、Python、Go 和 C# 等。本文将详细介绍 Protobuf 的工作原理、如何定义消息结构、生成代码及其在实际应用中的使用。Protobuf 使用.proto文件定义数据结构。
XSLT 实例：掌握 XML 转换的艺术
lly202406的博客
09-02 660
XSLT 是一种基于 XML 的语言，用于转换 XML 文档。它使用 XSLT 处理器将源 XML 文档转换为另一种格式，这个过程通常涉及将 XML 元素和属性映射到目标格式中的相应元素和属性。
排查 MyBatis XML 配置中的 IF 语句与传值名称不匹配的 Bug
最新发布
xh365647的博客
09-06 240
本文档只是为了留档方便以后工作运维，或者给同事分享文档内容比较简陋命令也不是特别全，不适合小白观看，如有不懂可以私信，上班期间都是在得
lxml官方入门教程（The lxml.etree Tutorial）翻译
shizidushu的博客
09-05 1104
这是一个关于使用lxml.etree处理XML的教程。它简要概述了ElementTree API的主要概念，以及一些简单的增强功能，这些功能可以让您作为程序员的生活更轻松。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1475
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 480
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 294
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
Vue双向绑定
m0_56131422的博客
09-01 767
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 828
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值