1）标签属性
任何一个DOM元素，有两种属性，一个是对象属性，一个是标签属性
把写在标签上的属性称为标签属性
任何一个DOM元素都是对象模型，都可以自主的添加设置对象的属性和值
设置标签属性
元素.setAttribute(属性名,属性值);
属性名的命名不能使用驼峰式命名，通常命名时使用-区分两个单词:toggle-target
属性值不能出现大写，并且必须是字符串
设置标签属性以后，可以用于多种数据使用，可以用于获取标签元素等操作
className class是一个特殊
获取标签属性值
元素.getAttribute(属性名)；
删除标签属性
元素.removeAttribute(属性名);
所有的标签单属性 值和属性名相同
通过下面都可以设置行内属性
div.setAttribute("style","50px;height:50px;background-color:red")；
当执行getComputedStyle(元素) 就会自动将元素与对应的css混合形成这个元素的渲染树对象
然后通过这个渲染树对象取出对应的属性
这个方法属于window的方法
IE任何版本都支持这种写法
console.log(div.currentStyle.width);
参数
type 要创建元素的类型 例如div，ul，img
style object对象 样式对象
props object对象 DOM对象属性
parent 父元素对象 需要将创建好的元素放在谁的里面
a超链接 href
图片 src
div textContent
抽象方法
function ce(type,style,props,parent){
// 创建一个元素，这个元素的类型是type
var elem=document.createElement(type);
// 将给入的样式对象中每个属性复制到创建好元素的style对象上
// 这样就相当于给创建好的元素增加样式
for(var prop in style){
elem.style[prop]=style[prop];
}
// props是DOM的对象属性
// 我们认为elem就是DOM对象，会将props这个对象中的所有属性复制到DOM对象上
for(var str in props){
elem[str]=props[str];
}
// 如果给入了要放在谁的里面，将元素放在这个里面
if(parent){
parent.appendChild(elem);
}
// 将创建好的元素返回出去
return elem;
}
2）宽高
元素.clientWidth 客户宽高
元素.clientHeight
元素.offsetWidth 偏移宽高
元素.offsetHeight
元素.scrollWidth 滚动宽高
元素.scrollHeight
// 1、内容高度 console.log(document.body.clientHeight);
// 2、可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
// 3、有滚动条时，内容宽高 console.log(document.body.scrollWidth,document.body.scrollHeight);
以上所有的宽高，基于元素被加入到DOM渲染树后
也就是被添加在页面中以后，才可以获取
并且图片这类后加载元素无法获取宽高 （异步原因造成）
异步 当运行某个需要一段时间完成的内容时，可以先继续向后执行代码，加载和执行后面是同时进行的
同步 上一步执行完成再执行下一步
getComputedStyle(div).width；样式值 50px
div.clientWidth 样式数值 50
3）位置
元素
width, //offsetWidth
height, //offsetHeight
left, //最左边到可视窗口的距离
top, //最顶部到可视窗口的距离
right,//left+width 最右边到可视窗口的距离
bottom,//top+height 最下面到可视窗口的距离
x, //left
y //top
元素的
// 1、offsetLeft、offsetTop，定位后元素相对父容器的距离
// 2、scrollLeft，scrollTop,元素内的滚动条位置
// 3 getBoundingClientRect()获取元素的矩形界限范围
html body
// body 和 html没有边线，所有这两个值都是0
// console.log(document.body.clientLeft,document.body.clientTop)
// console.log(document.documentElement.clientLeft,document.documentElement.clientTop)
// 因为body和html标签都是最顶端，最外层，这两个值都是0
// console.log(document.body.offsetLeft,document.body.offsetTop)
// console.log(document.documentElement.offsetLeft,document.documentElement.offsetTop)
元素.onscroll=function(){
当元素有滚动条事件触发
}；
网页标题文本滚动：
<script>
var s="";
var str="你好我的朋友，欢迎来学习H5.";
init();
funcition init(){
setInterval(enterFrame,1000);
};
funcition enterFrame(){
if(s.length===0) s=str;
document.title=s;
s=s.slice(1);
};
</script>
置顶：
<script>
var topBtn;
var bool=false;
init();
function init(){
topBtn=document.querySelector(".topBtn");
topBtn.onclick=clickHandler;
window.scroll=scrollHandler;
setInterval(enterFrame,1000);
};
function clickHandler(){
bool=true;
}
function scrollHandler(){
if(document.documentElement.scrollTop>document.documentElement.clientHeight){
topBtn.style.display="block";
}else{
topBtn.style.display="none";
}
}
function enterFrame(){
if (!bool) return;
document.documenrElement.scrollTop-=100;
if(document.documentElement.scrollTop===0){
bool=false;
}
}
</script>