js dom 生成及一些用法

最新推荐文章于 2022-08-08 22:29:46 发布
最新推荐文章于 2022-08-08 22:29:46 发布
阅读量694 收藏
点赞数
分类专栏： Javascript 文章标签： mozilla xml attributes opera function javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaokuner/article/details/6434226
版权

//解释文件

function loadXMLDoc(dname) 

{

try //Internet Explorer

  {

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

  }

catch(e)

  {

  try //Firefox, Mozilla, Opera, etc.

    {

    xmlDoc=document.implementation.createDocument("","",null);

    }

  catch(e) {alert(e.message)}

  }

try 

  {

  xmlDoc.async=false;

  xmlDoc.load(dname);

  return(xmlDoc);

  }

catch(e) {alert(e.message)}

return(null);

}

 

//解释字符

function loadTxtXMLDoc(dname) 

{

var xmlDoc;

try //Internet Explorer

 {

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

 xmlDoc.async="false";

 xmlDoc.loadXML(text);

 return xmlDoc;

 }

catch(e)

 {

 try //Firefox, Mozilla, Opera, etc.

   {

   parser=new DOMParser();

   xmlDoc=parser.parseFromString(text,"text/xml");

   return xmlDoc;

   }

 catch(e) {alert(e.message); reutnr null;}

 }

}

 

 

/**

========================

 XML DOM 属性

 

一些典型的 DOM 属性：

 

    x.nodeName - x 的名称

    x.nodeValue - x 的值

    x.parentNode - x 的父节点

    x.childNodes - x 的子节点

    x.attributes - x 的属性节点

    注释：在上面的列表中，x 是一个节点对象。

 

========================== 

  XML DOM 方法

 

    x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素

    x.appendChild(node) - 向 x 插入子节点

    x.removeChild(node) - 从 x 删除子节点

 

注释：在上面的列表中，x 是一个节点对象。

============================

遍历节点

 

下面的代码循环根节点的子节点，同时也是元素节点：

 

xmlDoc=loadXMLDoc("books.xml");

 

x=xmlDoc.documentElement.childNodes;

 

for (i=0;i<x.length;i++)

{ 

  if (x[i].nodeType==1)

  {//Process only element nodes (type 1) 

  document.write(x[i].nodeName);

  document.write("<br />");

  } 

}

======================================

nodeType 属性

 

nodeType 属性规定节点的类型。

 

nodeType 是只读的。

最重要的节点类型是：

元素类型 节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

==========================================

实例1

 

从 books.xml 中的 <title> 元素获取文本的 JavaScript 代码：

 

txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue

======================================

解析 XML 字符串 - 跨浏览器实例2

 

下面的代码加载并解析一个 XML 字符串：

 

下面的代码片段使用 loadXMLString 函数把 books.xml 载入 XML 解析器，并显示第一个 book 的数据：

 

text="<bookstore>"

text=text+"<book>";

text=text+"<title>Harry Potter</title>";

text=text+"<author>J K. Rowling</author>";

text=text+"<year>2005</year>";

text=text+"</book>";

text=text+"</bookstore>";

 

xmlDoc=loadXMLString(text);

 

document.write(xmlDoc.getElementsByTagName("title")

[0].childNodes[0].nodeValue);

document.write("<br />");

document.write(xmlDoc.getElementsByTagName("author")

[0].childNodes[0].nodeValue);

document.write("<br />");

document.write(xmlDoc.getElementsByTagName("year")

[0].childNodes[0].nodeValue);

 

===========================================

Node List Length

 

NodeList 对象会保持自身的更新。如果删除或添加了元素，列表会自动更新。

 

节点列表的 length 属性是列表中节点的数量。

 

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc，并返回 "books.xml" 中 <title> 元素的数量：

 

xmlDoc=loadXMLDoc("books.xml");

 

x=xmlDoc.getElementsByTagName('title').length;

 

在上面的语句执行之后，x = 4。

 

节点列表的长度可用于循环列表中所有的元素。

 

下面的代码片段使用 length 属性来遍历 <title> 元素的列表：

 

xmlDoc=loadXMLDoc("books.xml");

 

//the x variable will hold a node list

x=xmlDoc.getElementsByTagName('title');

 

for (i=0;i<x.length;i++)

{

document.write(x[i].childNodes[0].nodeValue);

document.write("<br />");

}

==========================================

DOM Attribute List (Named Node Map)

 

元素节点的 attributes 属性返回属性节点的列表。

 

这被称为 Named Node Map，除了方法和属性上的一些差别以外，它与节点列表相似。

 

属性列表会保持自身的更新。如果删除或添加属性，这个列表会自动更新。

 

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，并从 "books.xml" 中的第一个 <book> 元素返回属性节点的一个列表：

 

xmlDoc=loadXMLDoc("books.xml");

 

x=xmlDoc.getElementsByTagName('book')[0].attributes;

 

以上代码执行之后，x.length 等于属性的数量，可使用 x.getNamedItem() 返回属性节点。

 

下面的代码片段一个 book 的 "category" 属性的值，以及其属性的数量：

 

xmlDoc=loadXMLDoc("books.xml");

 

x=xmlDoc.getElementsByTagName("book")[0].attributes;

 

document.write(x.getNamedItem("category").nodeValue);

document.write("<br />" + x.length);

============================================

获取属性的值

 

在 DOM 中，属性也是节点。与元素节点不同，属性节点拥有文本值。

 

获取属性的值的方法，就是获取它的文本值。

 

可以通过使用 getAttribute() 方法或属性节点的 nodeValue 属性来完成这个任务。

获取属性值 - getAttribute()

 

getAttribute() 方法返回属性的值。

 

下面的代码检索第一个 <title> 元素的 "lang" 属性的文本值：

 

xmlDoc=loadXMLDoc("books.xml");

 

txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");

 

结果：txt = "en"

例子解释：

 

   通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

   把 txt 变量设置为第一个 title 元素节点的 "lang" 属性的值

 

TIY

 

遍历所有 <book> 元素，并获取它们的 "category" 属性：TIY

获取属性值 - getAttributeNode()

 

getAttributeNode() 方法返回属性节点。

 

下面代码检索第一个 <title> 元素的 "lang" 属性的文本值：

 

xmlDoc=loadXMLDoc("books.xml");

 

x=xmlDoc.getElementsByTagName("title")[0].getAttributeNode("lang");

txt=x.nodeValue;

 

结果：txt = "en"

例子解释：

 

   通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

   获取第一个 <title> 元素节点的 "lang" 属性节点

   把 txt 变量设置为属性的值

==========================================

DOM - 空白和换行

 

XML 经常在节点之间含有换行或空白字符。这是在使用简单的编辑器（比如记事本）时经常出现的情况。

 

下面的例子（由记事本编辑）在每行之间含有 CR/LF，在每个子节点之前含有两个空格：

 

<book>

 <title>Harry Potter</title>

 <author>J K. Rowling</author>

 <year>2005</year>

 <price>29.99</price>

</book>

 

Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。

 

下面的代码片段显示 （books.xml 的） 根元素拥有多少个子节点：

 

xmlDoc=loadXMLDoc("books.xml");

 

x=xmlDoc.documentElement.childNodes;

document.write("Number of child nodes: " + x.length);

 

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

忽略节点间的空文本

 

如需忽略元素节点之间的空文本节点，需要检查节点类型。元素节点的类型是 1：

 

xmlDoc=loadXMLDoc("books.xml");

 

x=xmlDoc.documentElement.childNodes;

 

for (i=0;i<x.length;i++)

{ 

if (x[i].nodeType==1)

 {// only process element nodes 

 document.write(x[i].nodeName);

 document.write("<br />");

 } 

}

========================================================

 */

 

/**

===========================================

 DOM 实例

 

请看下面的 XML 文件 (books.xml)：

 

<?xml version="1.0" encoding="ISO-8859-1"?>

 

<bookstore>

 

<book category="children">

  <title lang="en">Harry Potter</title> 

  <author>J K. Rowling</author> 

  <year>2005</year> 

  <price>29.99</price> 

</book>

 

<book category="cooking">

  <title lang="en">Everyday Italian</title> 

  <author>Giada De Laurentiis</author> 

  <year>2005</year> 

  <price>30.00</price> 

</book>

 

<book category="web">

  <title lang="en">Learning XML</title> 

  <author>Erik T. Ray</author> 

  <year>2003</year> 

  <price>39.95</price> 

</book>

 

<book category="web">

  <title lang="en">XQuery Kick Start</title> 

  <author>James McGovern</author> 

  <author>Per Bothner</author> 

  <author>Kurt Cagle</author> 

  <author>James Linn</author> 

  <author>Vaidyanathan Nagarajan</author> 

  <year>2003</year> 

  <price>49.99</price> 

</book>

 

</bookstore>

============================================

 */

zhaokuner
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript 生成DOM 对象（html标签）.rar
11-27
javaScript 生成DOM 对象（html标签） DHTML(html 的 DOM对象)
javascript Dom方法
zhangjinlei00的专栏
11-14 556
1、createElement（）创建节点 2、appendChild()方法可向节点的子节点列表的末尾添加新的子节点 3、createTextNode()可创建文本节点         js Dom方法的实例：                 创建一个图层，并且在该图层中显示出“abcd”文字               步骤：                （1）、创建该图层的节点
js 生成简单的dom
逆风优雅的博客
03-08 590
<body> </body> <script> function div(options={}) { let div = document.createElement('div') // 创建div // 设置创建的div的样式 div.style.width = options.width?options.width:'500px' div.style.height = options.
js动态创建DOM
好学而不勤问非真好学者
02-20 1294
调用document的createElement方法，来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将创建元素添加到相应的元素下。 例如：下面代码，动态添加一个div。 <head> <meta charset="utf-8" /> <title></title> <scri...
JavaScript动态创建DOM（七）
AI浩
06-02 5881
动态创建DOM document.write只能在页面加载过程中才能动态创建。 可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title&gt...
js操纵dom生成下拉列表框的方法
12-09
本示例展示了如何使用JavaScript操纵DOM来动态生成一个下拉列表框，即`<select>`元素及其内部的`<option>`元素。 首先，我们看到HTML的`<body>`标签有一个`onload`属性，它指定页面加载完成后执行的函数，这里是`...
Angular如何由模板生成DOM树的方法
10-15
在实际使用中，我们可以通过调用这些方法来生成HTML结构，就像在JavaScript中直接操作DOM一样。然而，这种方法并不适用于Angular的变更检测机制，因为它假设每次变更都需要完全重建DOM。实际上，Angular使用了一种...
利用vue.js插入dom节点的方法
10-20
首先，Vue.js 提供了 `$mount` 方法用于创建组件实例并挂载到DOM中。例如，在给定的示例中，我们创建了四个组件：MyComponent、myAppendTo、myBefore 和 myAfter。每个组件都有自己的模板，定义了它们将显示的内容。...
C#使用domtoimage生成图片保存服务器
05-24
4. **调用dom-to-image方法**：在JavaScript中，调用`domtoimage.toPng()`或`domtoimage.toJpeg()`方法，传入DOM元素和配置对象，生成Base64编码的图片数据。 5. **将图片数据发送回C#**：在JavaScript执行完成后，...
JS实现的DOM插入节点操作示例
11-28
2. `insetNode(nodeId, str)`函数首先通过`getElementById`获取指定ID的节点，然后调用`crNode(str)`生成新节点，并使用`insertBefore`方法将其插入到目标节点之前。 3. 当用户点击“前插入”按钮时，输入框中的文本...
js中的DOM
m0_71858591的博客
08-02 105
理解js中的DOM： 改变样式及querySelectorAll与querySelector两者的区别
通过JS动态创建DOM元素备忘
凯凯的专栏
04-19 777
1/**//*   2    动态创建DOM元素的相关函数支持   3     www.cnblogs.com/mcjeremy   4*/   5/**//*   6  获取以某个元素的DOM对象   7  @obj  该元素的ID字符串   8*/   9function getElement(obj) 10{ 11  returntypeof obj=='string'
js基础知识（二十七）--DOM对象的创建、插入
weixin_47928499的博客
08-08 3147
DOM对象的创建、插入
原生js写dom模版 js模版使用
m0_37743842的博客
04-25 591
原生js写dom模版 js模版使用 首先这种写，在页面渲染的时候，浏览器不会读取script标签中的html代码 外面不能获取到里面的div节点 <div></div> <script type="text/html" id="javascript_template"> <div onclick="_dom()"> <ul id="...
创建 DOM 元素的几种方式
angry_rooster的博客
06-23 8550
通过write()、createElement()和innerHTML创建元素 document.write() document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串 document.write(markup); 类似的还有一个document.wirteln()，只是最后紧跟一个换行符 如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点 但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖
原生JS DOM操作方法汇总
weixin_34405557的博客
01-09 739
创建节点 1. document.createElement(tagname) 创建一个由tagName决定的HTML元素 2. document.createTextNode(data) 创建一个文本节点，文本内容为data 3. document.createDocumentFragment() 创建一个空白的文档片段。文档片段是 DocumentFragment 对象的引用。是DOM节点，但...
js的DOM节点操作：创建 ，插入，删除，复制，查找节点
热门推荐
Torrex的博客
01-12 2万+
DOM含义：DOM是文档对象模型(Document Object Model，是基于浏览器编程的一套API接口，是W3C出台的推荐标准。其赋予了JS操作节点的能力。当网页被加载时，浏览器就会创建页面的文档对象模型。 节点：根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 1、整个文档时一个文档节点。 2、每个HTML元素是元素节点。 3、HTML元素内的文本是
JavaScript获取列表数据后使用ES6快速创建dom树
kirinlau的专栏
09-24 1487
在js中，经常会有获取到数据后批量渲染的需求，比如一个select的option,或者button group，又或者block块列表等等，这些数据都是从服务端请求获取到的，所以不得不拿到数据后然后进行创建dom，传统的的es5做法就是： var divItem= document.getElementById("div"); //文本节点 var textNode = document.crea...
原生JS的DOM操作汇总
Daivon_Up的博客
09-01 1253
JavaScript的DOM操作也是面试中的常见问题，尤其是当你需要回答jQuery的性能问题时，便需要再次回到JavaScript DOM API。 本文便总结一下常见的JavaScript DOM操作方法
在HTML5页面使用js DOM动态生成HTML内容
最新发布
06-03
可以使用JavaScript的DOM（文档对象模型）来动态生成HTML内容。具体而言，可以通过JavaScript代码创建新的HTML元素，并将它们添加到现有的HTML文档中。以下是一个简单的示例，演示如何使用DOM动态生成HTML内容： ```html <!DOCTYPE html> <html> <head> <title>动态生成HTML内容示例</title> </head> <body> <h1 id="title"></h1> <p id="content"></p> <script> var title = "动态生成HTML内容"; var content = "这是一个使用JavaScript DOM动态生成HTML内容的示例。"; // 创建新的HTML元素 var titleElement = document.createElement("h1"); var contentElement = document.createElement("p"); // 设置元素属性和内容 titleElement.setAttribute("id", "title"); titleElement.innerHTML = title; contentElement.setAttribute("id", "content"); contentElement.innerHTML = content; // 将元素添加到现有的HTML文档中 document.body.appendChild(titleElement); document.body.appendChild(contentElement); </script> </body> </html> ``` 在这个例子中，我们首先在HTML页面中定义了两个`<h1>`和`<p>`标签，分别用于显示标题和内容。然后，在JavaScript代码中，我们定义了两个变量`title`和`content`，用于存储标题和内容的文本。接下来，我们使用`document.createElement()`方法创建了两个新的HTML元素`titleElement`和`contentElement`。然后，我们使用`setAttribute()`方法设置了元素的属性`id`，并使用`innerHTML`属性设置了元素的内容。最后，我们使用`appendChild()`方法将新元素添加到现有的HTML文档中。运行该代码后，将动态生成一个带有标题和内容的HTML页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值