Dom元素的操作

getElementById(): 获取有指定惟一ID属性值文档中的元素

getElementsByName(name): 返回的是数组

getElementsByTagName(): 返回具有指定标签名的元素子元素集合

getAttribute(): 返回指定属性名的属性值

1	`document.getElementsByTagName("a")[0].getAttribute("target");`

setAttribute(): 添加指定的属性，并为其赋指定的值。

1	`document.getElementsByTagName("INPUT")[0].setAttribute("type","button");`

节点属性:

节点名称(只读):nodeName

节点值: nodeValue

节点类型(只读):nodeType

子节点：

ele.childNodes 返回数组

firstChild

lastChild

父节点

parentNode 只有一个

兄弟节点

nextSibling 某节点之后紧跟的节点

previousSibling

插入节点

appendChild() 插入在最后

insertBefore(newnode,node)在node节点之前

删除节点

removeChild(node) 成功返回被删除的节点失败返回null

替换元素节点

replaceChild(newnode,oldnode) 实现子节点对象的替换

创建元素节点

createElement()

创建文本节点

createTextNode()

复制节点

需要被复制的节点.cloneNode(true/false)

true复制当前节点极其所以子节点，false仅复制当前节点

时间： 2024-08-11 09:39:49

Dom元素的操作的相关文章

JQuery处理DOM元素-属性操作

1 //操作元素的属性: 2 $('*').each(function(n){ 3 this.id = this.tagName + n; 4 }) 5 6 //获取属性值: 7 $('').attr(''); 8 9 //设置属性值: 10 //为一个属性设置值 11 $('*').attr('title', function(index, previousValue){ 12 return previousValue + ' I am element ' + index + ' and my

通过简单搜索例子复习DOM元素相关操作

HTML: <div id="box"> <input type="text" id="search" value=""> <input type="button" id="btn" value="搜索"> </div> CSS: /*使水平居中*/ body{ position:relative; } #box{ po

返本求源——DOM元素的特性与属性

抛砖引玉很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'innerText', 'Hello World!') 这段代码执行后并未生效,虽说innerText不是标准属性,尚未被ff支持,可用的是chrome,这个属性是被支持的.既然显示的文本没变,那就查看一下元素吧. innerText被添加到了html标签上,而换成prop模块后,成功的为节点替换文本. 以上

DOM元素的特性和属性

首先来看一下他们的概念: 特性(Attribute):是DOM元素在文档中作为html标签拥有的属性: 属性(Property):是DOM元素在js中作为对象拥有的属性: 首先来了解一下DOM的五个标准特性(id.title.lang.dir.class) 对于标准特性来说,Attribute和Property是同步的,是会自动更新的, 对于自定义的特性来说,他们是不同步的(自定义的特性不会自动添加到property) HTML5规范对自定义特性做了增强,只要自定义特性以"data-attrN

操作DOM元素，Dom元素添加颜色，删除第二个li元素

<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添

JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点获取所以子节点 a) . childNodes b) . children c) . parentNode . children [索引] . children:获取所有子节点 opacity:0-1:透明度 alpha(opacity:百分数):IE6/7/8透明度先绑定事件再进行循环 previousNode()上一个兄弟节点 alert(变量名)可测试变量名是否

jquery操作DOM元素的复习

使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 操作元素的内容使用html()和text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容. var $content = "<b>唉,我又变胖了!</b>"; $("#html").h

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d

jQuery操作得到DOM元素

jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用.以下是一个小样例及其效果图. 代码例如以下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html;