等。元素节点可以包含其它的元素,唯一没有被包含在其它元素里的元素是,它是根元素。
属性节点(attribute node),元素或多或少地有一些属性,属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里,所以属性节点总是被包含在元素节点中。
文本节点(text node),
元素中包含着文本节点“Trees, trees, everywhere”。
28. 基本DOM方法getElementById(id)
返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素。
getElementsByTagName(tagname)
返回一个对象数组,它们分别对应着文档里的一个特定的元素节点。
getAttribute()
返回对象的属性值
setAttribute()
修改对象的属性值29. 重要DOM属性childNodes
可以将节点树中任何一个元素的所有子元素检索出来,这个属性返回一个数组,包含了给定元素节点的全体子元素。
nodeName
返回元素节点的名称。注意,返回的结果全部是大写。
nodeType
用来区分节点的类型,元素节点的nodeType属性值是1,属性节点的nodeType属性值是2,文本节点的nodeType属性值是3。
nodeValue
可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空。30. 重要DOM属性(续)firstChild和lastChild
第一个和最后一个孩子节点。
node.firstChild等价于node.childNodes[0],
node.lastChild等价于 node.childNodes[node.childNodes.length – 1]
parentNode
返回元素的父节点
nextSibling
返回下一个兄弟节点31. 改变网页结构的DOM方法createElement(tagname)
创建新的元素节点,此方法与document对象相关联。新建的元素节点并未与节点树相连。
appendChild(node)
把新建的节点插入到节点树的某个节点下,成为这个节点的子节点。
createTextNode(text)
创建文本节点
insertBefore(newNode, targetNode)
把一个新元素插入到一个现有元素的前面
replaceChild(newChild, oldChild)
替换一个孩子节点
removeChild(node)
删除一个孩子节点32. 基于DOM的Web应用程序示例33. 基于DOM的Web应用程序示例首先建立一个非常简单的应用程序,然后再添加一点DOM魔法。注意,DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页,上面只显示一个普通的旧式大礼帽,还有一个标记为 Hocus Pocus! 的按钮34. 初始的HTML清单注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮,单击该按钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮,可以把 JavaScript 函数和它连接起来与浏览器交互而无需提交表单35. 初始的HTML页面预览36. 目标效果下面增加一些魔法,用兔子的图片替换页面中原有的图片37. 使用getElementById()函数获得元素节点首先找到网页中表示img元素的DOM节点。一般来说,最简单的办法是用getElementById()方法,它属于代表Web页面的document对象:
var elementNode = document.getElementById(“id");
38. 修改图片,麻烦的办法完成所需修改有几种方法:有些简单,有些麻烦。但是运用较麻烦的办法是一次很好的DOM练习,首先看看换图片比较麻烦的办法;后面再重新分析一下看看有没有更简单的办法。
用带兔子的新照片替换原有图片的办法如下:
创建新的img元素
访问当前img元素的父元素,也就是它的容器
在已有img元素之前插入新的img元素作为该容器的子级
删除原来的img元素
结合起来以便在用户单击按钮时调用刚刚创建的函数39. 1、创建新的img元素创建新的img元素:
var newImage = document.createElement("img");
可以创建一个新的元素节点,元素名为img。在HTML中基本上就是:
下面需要增加一个属性src,它指定了要加载的图片:
newImage.setAttribute("src", "rabbit-hat.gif");
注:如果对已有的属性调用setAttribute(),则把原来的值替换为指定的值。但是,如果调用setAttribute()并指定一个不存在的属性,DOM就会使用提供的值增加一个属性40. 2、获得原始图片的父元素现在有了要插入的图片,还需要找到插入的地方。要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素:
var imgParent = hatImage.parentNode;41. 3、插入新图片添加子节点的方法:
insertBefore(newNode, targetNode)
appendChild(newNode)
把新图片元素插入到原有图片之前:
imgParent.insertBefore(newImage, hatImage);
现在原图片的父元素有了两个 子元素:新图片和紧跟在后面的旧图片42. 4、删除旧图片因为已经得到了旧图片元素的父节点,只要调用removeChild()并把需要删除的节点传递给它即可:
imgParent.removeChild(hatImage);
完整的JavaScript函数:43. 5、表单元素连接JavaScript每当用户点击Hocus Pocus!按钮的时候运行showRabbit()函数。为此只要向HTML中增加一个简单的 onclick事件处理程序即可:44. 思考:替换图片更简单的办法1、使用replaceChild()函数
imgParent.replaceChild(newImage, hatImage);
2、直接修改图片的src属性
hatImage.setAttribute("src", "rabbit-hat.gif");
3、使用HTML DOM方法
hatImage.src = “rabbit-hat.gif”;45. 把兔子藏起来虽然兔子从帽子中跳出来了,但是屏幕下方的按钮仍然显示 Hocus Pocus! 和调用 showRabbit(),下面做一些修改,当用户再次点击按钮时把兔子藏起来!46. 1、修改按钮的标签使用我们熟悉的方法,实现这个简单的功能,在showRabbit() 函数中添加如下语句:
47. 2、隐藏兔子隐藏兔子的方法基本上和放兔子出来完全相反,将图片的src属性再改回旧图片。创建一个新的 JavaScript 函数来完成这项任务:48. 3、更改事件处理函数现在虽然按钮的标签改变了,但是单击按钮时的动作没有变。当用户单击按钮时可以使用DOM改变事件或者发生的动作。在JavaScript中,可以通过按钮的onclick属性来引用该事件,因此可以改变按钮触发的事件:只要赋给onclick属性一个新的函数。49. 结束