1.DOM (Document Object Model)文档对象模型
js中对象的分类有三种：
- 用户定义对象
- 内建对象 Array Date Math等
- 宿主对象(由浏览器创建的对象)
model map
可以将DOM看成一棵“树”。DOM 把文档看做一棵家谱树，parent、child、sibling等。
2.DOM中的节点
- 元素节点 element node
- 文本节点 text node 没有内容的文档没有任何价值，而大多数内容都是由文本提供
- 属性节点 attribute node 比如<p title='xxx' id='xx'> 这里的title什么的
2.1获取元素节点的方式
- document.getElementById() 单个对象,最后结果是个Object
- document.getElementsByTagName 多个对象,最后结果是个HTMLCollection,集合,有点像数组push
- document.getElementsByClassName 过个对象,最后结果是个HTMLCollection,集合
<ul id="classlist">
<li class="item">js</li>
<li class="item">css</li>
<li>DOM</li>
</ul>
<script>
// 1.document.getElementById() 单个对象,最后结果是个Object
var eleNode = document.getElementById('classlist') // 获取出来是个对象哦,object
// 2.document.getElementsByTagName 多个对象,最后结果是个HTMLCollection,集合,有点像数组push
var objList = document.getElementsByTagName('ul')
// 3.document.getElementsByClassName 过个对象,最后结果是个HTMLCollection,集合
var oItems = document.getElementsByClassName('item')
</script>
2.2 setAttribute()和getAttribute()方法
<head>
/// .......
<style type="text/css">
#box{
color: red;
}
</style>
</head>
<body>
<p tilt="未设置的"> 嗨嗨嗨 </p>
<script>
var oP = document.getElementsByTagName('p')[0];
// 获取属性值xx.getAttribute,有一个必须的参数，这个节点对象的名字
var title = oP.getAttribute('title');
// 设置属性值xx.setAttribute(name,value),两个参数
oP.setAttribute('id','box')
// 注意：DOM工作方法：先静态加载文档的内容,再动态刷新DOM,动态刷新不会影响静态内容,加了这个id,也看不出来加了
cosole.log(title)
</script>
</body>
2.3 节点对象的单个重要属性介绍
- nodeName 节点名称
- nodeValue 节点的值
- nodeType 节点的类型
nodeName属性：节点的名称，是只读
- 元素节点的nodeName与标签名相同
- 属性节点的nodeName与属性的名称相同
- 文本节点的nodeName永远是#text
- 文档节点的nodeValue永远是#document
nodeValue属性：节点的值
- 元素节点的nodeValue是undefined或null
- 属性节点的nodeValue是属性的值
- 文本节点的nodeValue是文本自身
nodeType属性：节点的类型，是只读的(以下是几个常用的)
- 元素：节点类型是1
- 属性：2
- 文本：3
- 注释：8
- 文档：9
2.4 节点对象的常用属性
2.5 节点基本属性在各浏览器兼容性处理
2.6元素节点对象的增删改查方法
动态操作节点
- 创建节点 createElement()
- 插入节点 appendChild() insertBefore(newNode,node)
- 删除节点 removeChild()
- 替换节点 replaceChild(newNode,node)
- 创建文本节点 createTextNode()
3.样式设置
方法1（不推荐）：
<body>
<p id="box">llll</p>
<script type="text/javascript">
var para = document.getElementById("box");
console.log(para.style)
para.style.color = 'white';
para.style.backgroundColor = 'red';
para.style.width='200px'
</script>
</body>
方法2：通过控制属性类名控制样式
<head>
<meta charset="utf-8">
<title>动态操作样式</title>
<style type="text/css">
.highlight{
background-color: red;
color: white;
width: 250px;
height: 250px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<p id="box">llll</p>
<script type="text/javascript">
var para = document.getElementById("box");
para.setAttribute("class","highlight")
</script>
</body>
4.事件介绍
4.1 onclick事件
4.2 鼠标悬停事件
4.3 光标聚焦和失焦事件
4.4 表单控件上内容选中和改变事件
4.5 窗口加载事件
标签：DOM,对象,js,var,document,节点,属性 From： https://www.cnblogs.com/isayruby/p/18051181