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----->元素对象
学识浅薄,如有错误,恳请斧正,在下不胜感激。