DOM方法

1.DOM以及元素标签查询

DOM(document, object, model) 文档对象模型, 简称DOM;
浏览器在打开一个html页面之后，会针对html文件中的所有标签进行渲染，把每一个标签都解析成一个对象,这些对象以树形结构关联在一起，所以这种结构通常就叫做DOM结构，也就是所谓的DOM树,这些标签在解析过之后会将对象存储到document中，document是页面全体标签对象的一个集合，叫做文档对象模型;

method	use
document.getElementById("id");	该ID的元素，并返回该元素对象
document.getElementsByTagName("tag");	通过标签名查找到页面中所有对应标签的元素; 返回一个数组,包含了本次查找到的所有元素对象
document.getElementsByClassName("class");	通过class样式来查找元素，页面中所有class一样的元素都会被找到，返回一个数组，操作和BytagName的数组一样
document.querySelector("#id");	query查询 通过样式选择器进行查找，返回的是页面中第一个符合选择器的元素
document.querySelectorAll(".class");	查询到所有符合样式选择器的元素, 返回数组

2.更改元素的内容

method	use
p.textContent = "content";	textContent则直接显示文本
p.innerHTML = "content";	在设置内容时，会把内容中的标签解析为标签元素显示

3.元素的属性修改与自定义属性

html标签属性可以分为两种:
1.html标准属性 在html语法中规定的，有专门的用途,能够被浏览器识别到并且产生效果
2.自定义属性，标准属性之外的属性都叫做自定义属性，这些属性不会对元素产生影响，主要就是程序员为了满足个性化需求而自定义的

method	use
标准属性	标准的class属性可以设置多个值，所以class是一个列表操作,可以进行增删改查的操作
p.className = "class";	设置样式的名称，如果样式表中有该样式，那么会自动调用
p.classList.remove("class");	删除class样式
p.classList.add("class");	添加class样式
p.classList.toggle("class");	切换 有则删除 ,无则添加
p.classList.contains("class");	判断某样式存在不存在,返回一个布尔值
自定义属性	自定义属性使用上面的标准属性访问方式访问不到
p.getAttribute("state");	获取标签的自定义属性，参数是属性名; 返回一个属性值 该方法也可以用来获取标准属性
get是取值 set是赋值	setter方法和getter方法
p.setAttribute("state","ready");	添加属性或者自定义属性 1参：代表属性名称 2.属性值
p.hasAttribute("qwe");	判断是否有自定义属性 返回布尔值
p.removeAttribute("state");	删除

/*
对于标签对象，打点访问的是对象属性，对于标签的标准属性和对象的属性访问方式一样，但是如果是非标准属性，访问的是对象
的属性而不是标签的属性 所以访问方式不一样
*/

4.元素的添加与删除

method	use
var p = document.createElement("p");	创建一个标签，参数是标签的名称，返回创建的标签对象
p.textContent = "这是通过js语法创建的p标签";	为标签填充内容
document.body.appendChild(p);	添加 appendChild为某个元素添加子元素
构造标签一般分为三个步骤	1.创建 2.设置内容和样式 3.添加到页面中
document.body.insertBefore(p,firstTitle);	insertBefore 将一个标签作为子元素插入到另一个子元素之前; 1.代表要插入的对象元素 2.插入到哪个元素之前
console.log(firstTitle.parentElement);	parentElement表示本元素的父元素对象
document.body.removeChild(firstTitle);	删除子元素 参数是要删除的元素对象
table方法
var tr =table.insertRow();	insertRow()在table中插入一行
var td =tr.insertCell();	insertCell在tr中插入一列

5.js中访问元素的尺寸和位置

通过访问元素对象,style可以访问到样式表中的行内样式
如果本元素的样式是通过css设置的,那么没办法通过style来获取

method	use
box.offsetWidth	表示元素的宽度，带边框
box.offsetHeight	表示元素的高度，带边框
box.clientWidth	表示元素的宽度，不带边框
box.clientHeight	表示元素的高度，不带边框
获取元素相对于离自己最近的position(必须是非static的祖先元素的坐标)
box.offsetLeft	横坐标，带边框
box.offsetTop	纵坐标，带边框
box.clientLeft	横坐标，不带边框
box.clientTop	纵坐标，不带边框
浏览器工作区域内的宽高
window.innerWidth	宽
window.innerHeight	高
浏览器窗口的宽高
window.outerHeight	高
window.outerWidth	宽

6.属性类型节点

method	use
attributes	表示某个元素节点上所有的属性，返回一个属性列表; var attList =a.attributes;
name代表的是属性名	value代表的是属性值
getComputedStyle	获取一个元素节点的计算之后的样式表; lert(getComputedStyle(a).backgroundColor);

7.文本类型节点

method	use
childNodes	表示本节点的所有子节点，类型是一个nodelist(类似于数组);var list =ul.childNodes;元素中的标签和文本(包括空格和换行)都属于元素的子节点
nodeType	表示节点类型 1.为元素节点 2.代表属性节点 3.文本节点
appendData	在文本内容之后追加文本 ;txt.appendData(":html的第五个版本");
insertData	在文本的某个位置插入文本; txt.insertData(4,"5");
txt.length是文本内容的长度	文本节点属于叶子节点，没有子节点