1·获取行内样式
通过.style 获取的都是元素的行内样式,非行内样式获取不到
例:var text= document.ElementByTagName("p");
text.style.color = "yellow" 对样式进行设置,有赋值操作
text.style.width; 对样式进行获取,没有赋值操作
2·获取行内及非行内样式
window.getComputedStyle ------- W3C标准提供的方法,符合w3c标准的浏览器通过它获取样式
element.currentStyle: ------- 非w3c标准的浏览器获取方法(IE)
可以通过相关属性来对浏览器进行判断
如果BOM对象存在window.getComputedStyle属性则为w3c标准浏览器 否则为IE浏览器
例: var text = document.getElementById("p");
if (window.getComputedStyle){
getComputedStyle(text).color; 获取文本color属性
}else {
text.cuurentStyle.color;
}
text.tagName --- 获取标签名称
text.innerHTML --- 获取整个文本结构
text.innerText --- 获取文本
3·查找节点
通过父元素去查找子元素
例:var ul = document.getElementById("ul"); (后面的例子通用)
ul.firstChild;空格和换行也会被当做一个子元素被找到
ul.firstElementChild 只会找到元素节点忽略空格和换行
通过子元素找到父元素
例:var li2 = document.getElementById("li2");
li2.parentNode;
通过父元素查找所有子元素
例:ul.childNodes 返回所有节点 空格 换行
ul.children 只返回当前标签下的元素节点
返回整个文档
例:ownerDocument
返回前一个同级节点
例:li2.previousSibling 返回 节点 空格 换行
li2.previousElementSibling 只返回节点
返回后一个同级节点
例:li2.nextSibling 返回节点 空格 换行
li2.nextElementSibling 只返回节点
4·创建和克隆节点
createElement() ----- 创建一个全新的 标签,不包含任何内容和属性
appendChild() --- 把一个字元素追加到父元素后面
cloneNode --- 复制整元素的全部信息
cloneNode(布尔值)--- 布尔值为true 完全复制 布尔值为false 复制标签 不复制内容
insertBefore() ----- 在一个元素之前插入一个新的元素
参数1:你要新增的元素
参数2:在哪个元素之前插入
5·移除和替换节点
removeChild 移除一个字元素
replacechild() 用一个心元素去替换另一个元素 有两个参数
参数1:新的元素
参数2:想要替换的元素