DOM节点
一、childNodes找到节点; alter(oul.childNodes[i].nodeType);测试节点类型
二、当nodeType==3,该节点是文本节点;当nodeType==1,该节点是元素节点
三、另一种方法也可以用children代替childNodes,此方法更加方便。
四、parentNode找到父节点。
五、offsetParent获取有元素定位的父级。
六、
首尾子节点 firstChild firstElementChild
lastChild lastElementChild
兄弟节点 nextSibling nextElementSibling
previousSibling previousElementSibling
以上节点均有兼容性问题,均有if条件判断可以解决。
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background="red";
}
else
{
oUl.firstElementChild.style.background="red";
}
DOM方式操作元素属性
获取:getAttribute(名称)
设置:setAAttribute(名称,要设置的值)
删除:removeAttribute(名称)
复习:操作元素的三种方法
otxt.value="abc";
otxt.['value']="abc";
otxt.setA删除Attribute('value'.'abc');
用className选择元素(石川DOM基础08 )
className是获取元素的class;
可以用className进行条件筛选;
DOM创建元素
createElement 创建元素 创建一个节点
父级.appendChild(子节点) 追加一个节点
DOM插入元素
insertBefore(子节点,在谁之前) 在已有元素前插入
父级.appendChild(子节点)
兼容性问题
DOM删除元素
oul.removeChild(this.parentNode);
removeChild(节点) 删除一个节点
删除当前节点的元素。
DOM创建、插入、删除元素,都是对节点操作
DOM之表格操作
表格的便捷写法
getElementsByTagName("tbody")===tBodies
gtElementsByTagName("tr")===rows
getElementsByTagName("td")===cells
tHead表头 tFoot表尾
做表格的时候最好吧<tbody></tobody>标签也写上
表格的增删是利用对节点的操作然后结合表格的便捷写法。
一、childNodes找到节点; alter(oul.childNodes[i].nodeType);测试节点类型
二、当nodeType==3,该节点是文本节点;当nodeType==1,该节点是元素节点
三、另一种方法也可以用children代替childNodes,此方法更加方便。
四、parentNode找到父节点。
五、offsetParent获取有元素定位的父级。
六、
首尾子节点 firstChild firstElementChild
lastChild lastElementChild
兄弟节点 nextSibling nextElementSibling
previousSibling previousElementSibling
以上节点均有兼容性问题,均有if条件判断可以解决。
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background="red";
}
else
{
oUl.firstElementChild.style.background="red";
}
DOM方式操作元素属性
获取:getAttribute(名称)
设置:setAAttribute(名称,要设置的值)
删除:removeAttribute(名称)
复习:操作元素的三种方法
otxt.value="abc";
otxt.['value']="abc";
otxt.setA删除Attribute('value'.'abc');
用className选择元素(石川DOM基础08 )
className是获取元素的class;
可以用className进行条件筛选;
DOM创建元素
createElement 创建元素 创建一个节点
父级.appendChild(子节点) 追加一个节点
DOM插入元素
insertBefore(子节点,在谁之前) 在已有元素前插入
父级.appendChild(子节点)
兼容性问题
DOM删除元素
oul.removeChild(this.parentNode);
removeChild(节点) 删除一个节点
删除当前节点的元素。
DOM创建、插入、删除元素,都是对节点操作
DOM之表格操作
表格的便捷写法
getElementsByTagName("tbody")===tBodies
gtElementsByTagName("tr")===rows
getElementsByTagName("td")===cells
tHead表头 tFoot表尾
做表格的时候最好吧<tbody></tobody>标签也写上
表格的增删是利用对节点的操作然后结合表格的便捷写法。