Javascript 第六天 笔记

节点的增加:

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时,才能阻拦住表单的提交行为

转载于:https://www.cnblogs.com/cnmice/archive/2013/03/17/2964900.html