当前位置：文档之家 › 初级javascript：dom中setAttribute与html dom

初级javascript：dom中setAttribute与html dom

  • 格式：doc
  • 大小：28.00 KB
  • 文档页数：1

在标准的DOM中，如果要获取对象属性我们可以使用getAttribute;
eg:获取对象o的title的值，我们将他的值保存到bute中：
var o = document.getElementById(”o”);
var bute = o.getAttribute(”title”);
如果要对对象重新设置属性的话，在标准DOM中，使用setAttribute;
eg：现在对对象o重新设置title属性的值：
o.setAttribute(”title”,”abc”);
但是html dom的方法是对象后直接跟属性即可。

比如要获取和设置对象的属性title：
bute = o.title;
o.title = “abc”;
上面说了关于如何获取对象的属性值，其实在很多书籍中及网站上都有说到，在这里说的目的最后是想告诉大家的是：
IE在setAttribute()上存在很大的问题：有时候会存在为对象重新设置新属性后并不是预期你所想得到的，在现在需要兼容多浏览器的时候，如果你需要设置属性的话，建议使用html dom方法。

方法并非一种，也有其他的方法，只是觉得此方法更加简单一些，比如if(isIE)的方法也是可行的。

也就是为ie专门写一条语句。

ppk的书特别讲述了这个问题，二者是有本质区别的。

o.setAttribute(”name”, “value”);直接操作的是DOM节点的属性。

= “value”;直接操作的是JavaScript对象o的属性name。

DOM和JavaScript在浏览器中可以互通，不过不同的浏览器的细节不一样。

比如下面这个例子：
//
//选中一个复选框，并取消复选框的选中状态
var oCheckbox = document.getElementByI d(”myId”);
oCheckbox .setAttribute(”checked”, “”);//Firefox, Opera没有效果oCheckbox .checked = “”; //所有浏览器有效。

合集下载

jsdom 用法 -回复

jsdom 用法 -回复

jsdom 用法-回复jsdom是一个用于在Node.js环境中实现DOM操作的库。

它允许开发者在服务器端使用JavaScript模拟和操纵DOM元素，这对于一些需要在服务器端生成和操作HTML文档的应用程序来说非常有用。

本文将一步一步介绍如何使用jsdom进行DOM操作。

第一步：安装jsdom在开始使用jsdom之前，我们需要将它安装到我们的项目中。

我们可以使用npm进行安装，打开终端并运行以下命令：npm install jsdom这将在我们的项目中安装最新版本的jsdom库。

第二步：引入jsdom安装完成后，我们需要在我们的代码中引入jsdom库。

可以使用require语句将它导入到我们的文件中：javascriptconst { JSDOM } = require('jsdom');第三步：创建DOM环境接下来，我们需要创建一个DOM环境，这将允许我们在Node.js中模拟DOM操作。

我们可以通过调用JSDOM构造函数来创建一个DOM 环境：javascriptconst dom = new JSDOM('<html><body></body></html>');这将创建一个空白的HTML文档，类似于浏览器中的一个空白页。

第四步：获取document对象一旦我们有了DOM环境，我们就可以通过访问dom.window.document属性来获取document对象，该对象用于操纵DOM元素：javascriptconst document = dom.window.document;现在，我们可以使用标准的DOM操作方法来操纵这个document对象，例如添加元素、修改元素属性、查询元素等。

第五步：添加和修改DOM元素在这一步中，我们可以使用document对象提供的方法来添加和修改DOM元素。

例如，我们可以使用createElement方法创建一个新的元素，并使用appendChild方法将其添加到body元素中：javascriptconst element = document.createElement('div');element.textContent = 'Hello, world!';document.body.appendChild(element);这将在body元素中添加一个包含文本“Hello, world!”的div元素。

js的setattribute方法

js的setattribute方法

js的setattribute方法一、什么是setAttribute方法setAttribute方法是JavaScript中的一个DOM操作方法，它用于设置HTML元素的属性。

通过setAttribute方法，可以在JavaScript中动态地修改HTML元素的属性值。

二、setAttribute方法的语法setAttribute方法的语法如下：element.setAttribute(attributeName, attributeValue);其中，element表示要修改属性的HTML元素对象；attributeName 表示要修改的属性名称；attributeValue表示要设置的属性值。

三、setAttribute方法的使用1. 修改元素的class属性可以使用setAttribute方法来修改元素的class属性。

例如，要将id为"demo"的div元素添加一个名为"newClass"的class，代码如下：```var demo = document.getElementById("demo");demo.setAttribute("class", "newClass");```2. 修改元素的style属性可以使用setAttribute方法来修改元素的style属性。

例如，要将id 为"demo"的div元素设置背景颜色为红色，代码如下：```var demo = document.getElementById("demo");demo.setAttribute("style", "background-color: red;");```3. 修改元素自定义属性可以使用setAttribute方法来修改自定义属性。

创建dom元素的方法

创建dom元素的方法

创建dom元素的方法DOM（文档对象模型）是一种可以让我们在网页上操作HTML和XML文档的API。

DOM把文档分割成节点，每个节点都可以由JavaScript来操作，而创建DOM元素就是指用JavaScript通过DOM API来创建元素节点。

在创建DOM元素时，我们需要了解它的属性和子节点。

属性的定义类似于HTML内标记，例如id、class、href等属性，而子节点就是当前元素下面的节点，有text和element两种节点类型，分别表示文本内容和元素节点。

首先，我们需要了解DOM元素的创建方法。

在JavaScript中，需要使用document.createElement()方法来创建元素，使用appendChild()方法可将任意节点添加到父节点中，使用removeChild()方法可将子节点从父节点中移除，使用replaceChild()方法可将新节点替换父节点中的某个子节点等。

其次，我们需要了解DOM元素的操作方法。

在JavaScript中，可以使用getElementsByTagName方法获取特定标签的元素集合，使用getElementById方法获取指定id的元素，使用querySelector方法可以获取指定的元素，使用querySelectorAll方法可以获取指定元素的集合等。

此外，也可以使用setAttribute()、getAttribute()来设置和获取元素的属性。

最后，我们需要了解DOM元素的事件绑定方法。

在JavaScript 中，可以使用addEventListener()绑定特定事件；使用removeEventListener()方法可以解除事件绑定；使用dispatchEvent()方法可以派发事件；使用stopPropagation()方法可以终止事件冒泡；使用preventDefault()方法可以阻止事件默认行为等等。

总而言之，DOM元素的创建、操作、事件绑定都需要使用JavaScript中的DOM API来完成，这些API的使用方法和用法都是需要详细了解的。

dom标准中定义的方法

dom标准中定义的方法

dom标准中定义的方法
DOM标准中定义了多种方法，用于对文档结构进行操作和修改。

以下是其中一些常用的方法：
1. getElementById(id)：根据元素的id属性选择并返回匹配的
元素。

2. getElementsByTagName(tagName)：根据元素的标签名选择
并返回匹配的元素列表。

3. getElementsByClassName(className)：根据元素的类名选择
并返回匹配的元素列表。

4. createElement(tagName)：创建一个具有指定标签名的新元素。

5. createTextNode(text)：创建一个包含指定文本内容的新文本
节点。

6. appendChild(node)：将一个节点作为子节点添加到指定元素
的末尾。

7. removeChild(node)：从指定元素中移除一个子节点。

8. replaceChild(newNode, oldNode)：用一个新节点替换指定元
素中的一个旧节点。

9. addEventListener(event, function)：向元素添加一个事件监听
器。

10. removeEventListener(event, function)：从元素移除一个事件监听器。

11. setAttribute(name, value)：设置元素的指定属性的值。

12. removeAttribute(name)：从元素中移除指定属性。

这些方法只是DOM标准中定义的一小部分，还有更多方法可用于处理和操作元素、文本节点、属性等。