DOM修改 使用DOM操作CSS


DOM修改

document.createElement("TagName")
可以用于创建一个元素节点对象,
它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,
并将创建好的对象作为返回值返回

document.createTextNode("textContent")
可以用于创建一个文本节点对象,
需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回

appendChild()
向一个父节点中添加一个新的子节点
语法:父节点.appendChild(子节点)

insertBefore()
可以在指定的子节点前插入新的子节点
语法:父节点.insertBefore(新节点,旧节点)

replaceChild()
可以使用指定的子节点替换已有的子节点
语法:父节点.replaceChild(新节点,旧节点)

removeChild()
可以删除一个子节点
语法:父节点.removeChild(子节点)
推荐方式:子节点.parentNode.removeChild(子节点)

使用innerHTML也可以完成DOM的增删改的相关操作,一般我们会将上述方法与innerHTML结合使用,
比方说用innerHTML向节点中添加文本,而不是使用相比之下更为麻烦的document.createTextNode()配合appendChild()来实现此功能。

a元素要添响应函数时,取消a元素的默认行为:

在响应函数的最后添加return false;或者将html中a标签的href属性值改为javascript:;

新添加的元素响应函数不起作用

是因为响应函数在页面加载完就绑定好了,新添加的元素需要再绑定一次。

响应函数中的数组索引问题

如果响应函数是给一个数组设置的,外有一个for循环,for循环会在页面加载完成之后立即执行,而响应函数会在被点击时才执行(这里为onclick),此时for循环早已执行完毕,所以此时在响应函数内输出i,i将为固定值。

使用DOM操作CSS

通过JS修改元素的样式

语法:元素.style.样式名 = 样式值

注意:如果CSS的样式名中含有-,
这种名称在JS中是不合法的,如background-color,
需要将这种样式名修改为驼峰命名法,去掉-,然后将-后的字母大写
比如:backgroundcolor ---------> backgroundColor
   borderwidth ---------> borderWidth

我们通过style属性设置的样式都是内联样式,由于内联样式的优先级比较高,
所以我们通过JS来修改的样式,往往会立即生效,
但是如果样式中设置了!important,此时样式将具有最高优先级,即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效,所以尽量不要使用!important

读取元素的当前样式

通过style属性读取
语法:元素.style.样式名

注意:通过style属性设置和读取的都是内联样式,无法读取样式表中的样式

使用getComputedStyle()(IE8以上,其它任何浏览器)
这个方法是window对象的方法,可以返回一个对象,这个对象中保存着当前元素生效样式
参数:
第一个:要获取样式的元素
第二个:可以传递一个伪元素,一般传null
例子:
获取元素的宽度
getComputedStyle(box , null).width;(不会返回auto,会返回真实的数值)
通过该方法读取到样式都是只读的不能修改

使用currentStyle(只支持IE,且只支持IE8以上)
语法:
元素.currentStyle.样式名
例子:
box.currentStyle.width
通过这个属性读取到的样式是只读的不能修改

实现在所有浏览器包括IE8中兼容读取样式的方法

 1 /* 定义一个函数,用来获取指定元素的当前的样式 
 2 
 3 参数: 
 4 
 5   obj 要获取样式的元素 
 6 
 7   name 要获取的样式名 
 8 
 9 */ 
10 
11 function getStyle(obj , name){ 
12 
13 //对象.属性不存在,不会报错,会返回undefined,如果直接寻找对象,(当前作用域到全局作用域)找不到会报错 
14 
15     if(window.getComputedStyle){ 
16 
17         //正常浏览器的方式,具有getComputedStyle()方法 
18 
19         return getComputedStyle(obj , null)[name]; 
20 
21     }else{ 
22 
23         //IE8的方式,没有getComputedStyle()方法 
24 
25         return obj.currentStyle[name]; 
26 
27     } 
28 
29     //return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];                         
30 
31 } 

其他的样式相关的属性(以下样式都是只读的)

clientWidth
clientHeight
元素的可见宽高,包括元素的内容区和内边距的宽度,返回一个数字,可以直接进行计算

offfsetWidth
offsetHeight
整个元素的宽高,包括内容区、内边距、边框

offsetParent
可以用来获取当前元素的定位元素
会获取离当前元素最近的开启了定位的祖先元素,如果所有的祖先元素都没有开启定位,则返回body

offsetLeft
offsetTop
当前元素相对于定位父元素之间的偏移量

scrollWidth
scrollHeight
可以获取元素整个滚动区域的宽高

scrollTop
scrollLeft
可以获取垂直和水平滚动条滚动的距离

判断滚动条是否滚动到底
垂直滚动条
scrollHeight -scrollTop = clientHeight

水平滚动
scrollWidth -scrollLeft = clientWidth

其余属性和方法详见文档,javascript----->DOM----->元素对象

 

学识浅薄,如有错误,恳请斧正,在下不胜感激。

相关