节点的增加:
1:你要增加什么结点?
2:增加在哪儿?
假设在body的container div里,增加一个p标签?
那就要: 先做一个p节点,然后把p节点放到div里去.
创建元素节点:
document.createElement;
创建文本节点:
document.createTextNode
给某元素插入一个子元素,并插在最后.
节点.appendChild (追加子元素)
不仅可以创建节点,还可以复制/克隆一个节点
oldNode.cloneNode(true/false); //代表克隆节点,并同时克隆/不克隆子节点
删除节点:
当你某个节点,nodeN为例,你是无法调用nodeN.xxx()方法把删掉.
必须得站在其父节点的高度,通过removeChild才能删除.
父节点.removeChild(待删除的子节点)
节点的替换:
先创建一个新节点准备, 再找到要被替换的旧节点.
然后到旧节点的父节点上去,站在父节点的高度上.
父节点.replaceChild(新节点,旧节点);
直接插入html内容 [不是w3c的标准,但是主流浏览器支持,而且非常好用]
innerHTML 属性
节点的innerHTML属性是可读可写.
读: 是把某个节点的内部的html代码读取出来.
如果赋值,则相当于把节点的html代码更新.
修改节点的属性:
在节点中,
一种是直接写在标签内部的属性, 见下面的蓝色部分的示例
<img src="bai.gif" alt="abc" title="xxxx" />
<input type="text" value="内容" name="cont" />
<input type="checkbox" value="台球" checked="checked" class="aaa" />
注意: 有一个例外:
控制元素的类名称的时候,不用obj.class,而是用obj.className
还有一种,是体现css里的属性:
Style.各种css属性,如 width, height, border,fontSize
注:
在css中的属性, 与 js中控制相应的属性,名称有一个对应关系.
如 background ---> style.background; 这种情况,js的属性与css的属性名相同即可.
如果形如margin-left,font-size这种中间有"-"的css属性, 用js来控制时,
则属性名 变为 marginLeft, fontSize,
规律为: 把css属性中的"-"去掉,并把"-"后的首字母大写
DOM事件
DOM事件就是指当页面上发生某一件事时候,激发某一个函数, 相当于"监听/触发设备"
比如:元素被单击时 用onclick来激发一个函数
元素失去焦点时, 用onblur事件
表单被提交时, 用onsubmit,事件 .
DOM事件如何声明?
1: 直接在元素标签中声明
<input type="text" onclick="fun();" />
2:以事件属性赋上一个函数变量
例: inputobj.onclick = fun;
主要的DOM事件
DOM事件可以归为3类
1: 页面上的变化引起的,比如失去焦点, 关闭页面
2: 鼠标变化引起的, 比如,鼠标经过,鼠标单击,鼠标双击,
3: 键盘事件
其中, onsubmit事件比较特殊
在<form onsubmit="return 函数名();">
这样,函数return false时,才能阻拦住表单的提交行为