JavaScript(八 )

JavaScript(八 )

一、选择器查询

var div = document.getElementsByTagName(“div”);
getElementsByTagName：getElementsByTagName是按照标签名进行查询，它的输出的是一个类数组，暂且可以将此类数组当作数组来进行使用

var elems = document.querySelectorAll(“div p”);
querySelectorAll：querySelectorAll是父级标签下的子级标签名进行查询，前面为父级标签，后面为子级标签

var p = document.createElement(“p”);
div.appendChild§;
createElement、appendChild：一般情况下是放在一起进行使用，作用就是对标签进行添加，很方便

二、访问html的属性

获取指定属性的值 标签中必须有写的
link.getAttribute(“href”);
修改属性值
link.setAttribute(“href”, “#top”);
删除属性
link.removeAttribute(“class”);
判断是否包含属性
var bool = link.hasAttribute(“title”);
**判断是否包含属性，返回值为boolean类型

三、修改样式（style属性）

只能设置标签的行内样式 同理，获取也只能获取行内样式
h1.style.backgroundColor = “#0f0”; //添加背景属性

只读的样式 且是元素上完整的样式（经过计算了的）
h1.setAttribute(‘style’,‘color:red;height:500px’)
var h1Style = window.getComputedStyle(h1, null);
console.log(h1Style.width);//能过获取到内部甚至外部样式

返回计算样式的值都是具体值，没有相对的位置了
var span = document.getElementsByTagName(“span”)[0];
console.log(getComputedStyle(span, null).right);//具体的值

**IE8以及以下不兼容

获取元素伪类上的样式
getComputedStyle(h1, “after”).color