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----->元素对象

 

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

JS基础课程笔记

相关

标签