DOM编程

DOM.jpg (上传于2018-11-19 20:32:41)
澳门新葡亰 1

天气: 冷

Element.png (上传于2018-11-19
20:32:41)
澳门新葡亰 2

<element>.setAttribute(name,value)
:该方法用来设置元素中name属性的值.

方法
appendChild()
描述:追加子节点
语法:object.appendChild(node)

<element>.parentNode
:以Node的形式返回当前节点的父节点.如果没有父节点,则返回null.

DOMTree.png (上传于2018-11-19
20:32:41)
澳门新葡亰 3

  <html>
<head>
<title>测试</title>
</head>
<script. language=”javascript”>
function show()
{
         var showdiv         =         document.createElement(“div”);
         showdiv.setAttribute(“id”,”div1″);
         showdiv.innerHTML = “这就是所谓的动态创建!”;
         showdiv.style.height = “100px”;
         showdiv.style.backgroundColor = “yellow”;
         document.body.appendChild(showdiv);
}
</script>
<body>
<a href=”javascript.:show();”>点我</a>
</body>
</html>

方法
getElementById()
描述:根据ID获取对象
语法:Element document.getElementById(string id)

<element>.cloneNode(true)
:复制当前节点,true表示复制当前节点以及它的所有子孙节点.

澳门新葡亰,节点的类型

document
.getElementsByTagName():返回文档中具有指定标记名的所有Element节点.返回为一Element节点数组;

节点(Node),在DOM树中所存在的任何一个元素(如HTML元素,文本、属性等)。

<element>.removeChild(childNode)
:该方法从元素中删除子元素childNode.

1.什么是DOM?

document.createAttribute(): 用指定的名字创建新的Attr节点.

描述:创建元素节点

Node对象常用属性:

createAttribute
描述:创建属性节点
语法:attrNode document.createAttribute(string name)

节点的属性和方法:

Node.ELEMENTNODE,1(元素类型)
Node.ATTRIBUTE
NODE,2(属性类型)
Node.TEXTNODE,3(文本类型)
Node.COMMENT
NODE,8(注释类型)
Node.DOCUMENT_NODE,9(文档类型)

<element>.attributes
:如果该节点是一个Element,则以namedNodeMap形式返回该元素的属性.

属性
firstChild
lastChild
nextSibling
previousSibling
parentNode
childNodes
nodeName
nodeType
nodeValue

<element>.insertBefore(newNode,targetNode)
:该方法将节点newNode作为当前元素的子节点插到targetNode子节点元素的前面.

Document.png (上传于2018-11-19
20:32:41)
澳门新葡亰 4

<element>.tagName
:元素的标记名称,比如<p>元素为PHTML文档返回的tagName均为大写;

replaceChild()
描述:节点的替换
语法:object.replaceChild(newNode,oldNode)

属性/方法                                                                                   
描述

DOM.png (上传于2018-11-19 20:32:41)
澳门新葡亰 5

document的属性和方法:

语法:Element document.createElement(string tagName)

**1.creatElement()方法
规则document.creatElement(nodeName)
例如我们可以使用如下的语句来创建一个段落。
document.creatElement(“p”)
2.creatTextNode()方法
规则document.creatTextNode(text)
例如我们可以使用如下语句来创建一条语句用来问候大家。
document.creatTextNode(“Hello World”)
3.appendChild()方法
规则parent.appendChild(child)
创建了所需要的结构或内容以后还需要将所创建的东西插入到文档当中才能算成功。例如我们可以使用如下的方法来建立起我们需要创建的HTML内容。请注意这完全是动态建立的。
var para = document.createElement(“p”);
var testdiv = document.getElementById(“testdiv”);
var txt = document.createTextNode(“Hello World”);
testdiv.appendChild(para);
para.appendChild(txt);
这样我们就把之前所建立的结构与内容插如到了我们所需要的地方。不过问题也随之而来,appendChild()方法只能创建已知元素结点的最后一个子结点,如果当父元素已经拥有几个子元素的时候,我们是无法通过appendChild()方法来选择插入点的。
4.insertBefore()方法
规则parentElement.inserBefore(newElemenet,targetElement)
在使用的时候,我们不需要知道父元素到底是谁,因为我们可以通过这样的语法获得父元素:
targetElement.parentNode
这样看上去似乎有点好笑,当别人问你父亲是谁的时候,你却告诉别人,我的父亲就是“我的父亲”。不过在DOM中,它确实就是一个能实际使用的方法。

3.Node接口

      如果使用appendChild将<tr>元素直接增加到<table>中,则在IE中这一行并不出项,但在其他浏览器中却会显示出来.对此的解决之道是,将<tr>元素增加到表的<tbody>元素中,这种解决办法在所有的浏览器中都能正确工作.

DOM提供处理XML/HTML文档的API。

document.getElementById(): 返回文档中具有指定id的Element节点.

createTextNode
描述:创建文本节点
语法:textNode document.createTextNode(string value)

 

2.document对象
属性

  • createElement()方法
  • createTextNode()方法
  • appendChild()方法
  • insertBefore()方法

removeChild()
描述:删除节点
语法:object.removeChild(node)

<element>.setAttributeNode()
:把指定的Attr节点添加到该元素的属性列表中.

createElement()

<element>.removeAttributeNode()
:从元素的属性列表中删除指定的Attr节点.

Attr.png (上传于2018-11-19
20:32:41)
澳门新葡亰 6

<element>.nodeType :代表节点的类型.

createComment
描述:创建注释节点
语法:commentNode document.createComment(string value)

           
关于setAttribute方法,IE也有麻烦.IE不能使用setAttribute正确地设置class属性.对此有一个跨浏览器的解决方法,即同时使用setAttribute(“class”,”newclassName”)和setAttribute(“className”,”newClassName”).另外,在IE中不能使用setAttribute设置style属性.最能保证浏览器兼容的技术不是<element>.setAttribute(“style”,”font-weight:bold;”),而是<element>.style.cssText=”font-weight:bold;”.

网站地图xml地图