JavaScript DOM操作
来源:互联网 发布:java发送邮件的代码 编辑:程序博客网 时间:2024/04/30 08:10
创建节点
1.createElemet() 按照给定的标签名创建一个新的元素节点,返回值是指向这个元素节点的引用指针#reference = document.createElement(element);其中reference指向一个元素节点,所以 reference.nodeType=1 reference.noteName=element注意:用createElement()方法创建的新元素不会自动添加到文档里。如果新节点没有nodeParent属性,则它只是存在于JavaScript上下文里的DocumentGragment对象。如果想把这个DocumentGragment对象添加到文档中,则需要使用appendChild()或insertBefore()或replaceChild()等方法。2.createTextNode() 创建一个包含着给定文本的新文本节点,这个方法返回的是指向新建文件节点的引用指针:reference = document.createTextNode(content)所以: refrence.nodeType=3 refrence.nodeValue=content refence.nodeName=#text同理要使用appendChild()、insertBefore()、replaceChild(),将文本节点添加至文档树
复制节点
1.cloneNode()cloneNode()方法为给定节点创建一个副本,返回值是指向这个副本的引用指针reference=node.cloneNode(deep) deep是一个布尔类型参数,决定是否要把复制节点的子节点也一同复制到新建节点里去。如果这个参数是false,新节点将不包含任何子节点————若被复制节点是一个元素节点,这意味着包含在被复制节点里的所有文本将不会被复制(那些文本是一个子节点),但属性节点会被复制。实例:var para=document.createElement("p");var message=document.createTextNode("hello world");para.appendChild(message);document.body.appendChild(para);var newpara=para.cloneNode(true);document.body.appendChild(newpara);注意:如果被复制元素有一个独一无二的id属性,千万不要忘记复制出来的新元素的id属性值要进行修改。在同一文档中,不同元素的id值,必须各不相同。
插入节点
1.appendChild() 给元素节点追加一个子节点2.insertBefore(newNode,targetNode) 把一个给定元素节点插入到目标子节点的前面
删除节点
removeChild() 删除给定元素里的一个子节点,返回值是指向已被删除的子节点的引用指针
替换节点
replaceChild() 把给定父元素里的一个子节点替换成另外一个节点reference = element.replaceChild(newChild,oldChild);
设置节点属性
setAttribute()element.setAttribute(attribute,attributevalue);属性的名字和值以字符串的形式传递,如果属性已存在则覆盖,不存在则先创建在为其复制。setAttribute()只能用于属性节点上。
查找节点
1.getAttribute()attributeValue=element.getAttribute(attributeName),返回指定属性值2.getElementsByTagName() 返回一个节点数组,或null3.hasChildNodes() 检查一个给定元素是否有子节点(属性节点不是子节点)
DOM属性
节点属性: nodeName nodeType nodeValue遍历节点树: childNodes firstChild lastChild nextSibling parentNode previousSibling
0 0
- [DOM]javascript DOM操作
- javascript 操作 HTML DOM
- JavaScript Dom操作XML
- javascript 操作 HTML DOM
- javascript 操作 HTML DOM
- javascript DOM 操作
- javascript 操作 HTML DOM
- javascript 操作 HTML DOM
- javascript --操作dom
- javascript操作DOM
- javascript DOM操作基础
- javascript DOM操作基础
- javascript DOM操作基础
- javascript DOM 操作
- javascript 操作 dom
- javascript DOM 操作
- javascript DOM操作基础
- javascript操作DOM示例
- 《数据结构导论之二叉树》
- 鸡血搬前行。
- Android版本更新
- MYSQl的学习笔记------表的基本操作
- Java:JVM内存管理(一)
- JavaScript DOM操作
- 【Consul】多数据中心
- c语言编写猜数小游戏
- HTML标签的嵌套
- Android中线程通讯类Handler
- Android开发之手把手教你写ButterKnife框架(一)
- jQuery 循环遍历对象/集合/数组
- RecyclerView分割线——万能分割线
- Jquery的选择器