dom（document object model）
-文档对象模型，包含整个页面所有功能，可以通过调用方法的形式来操作页面，所以js和dom结合在一起可以写一些逻辑性的语言
dom的对象 dom有5个对象
document 文档对象(重要),文档即页面
element object 标签对象(重要)
text object 文本对象
attrbute object 属性对象
comment object 注释对象
dom定位（在后续ui测试过程中，用selenium定位不到元素时可以用dom定位）
通过id定位(带s取所有)
document.getElementsById('123')
通过class定位(带s取所有)
document.getElementsByClassName('inner')
通过标签名定位(带s取所有)
document.getElementsByTagName('input')
通过name值定位(带s取所有)
document.getElementsByName('xxxx')
通过层级关系定位
var tmp = document.getElementById('inner1') 把查找id赋值给tmp变量
tmp.nodename 标签名
tmp.nodetype 内置标签类型号,没什么用
tmp.nodevalue 标签value值,默认为空
tmp.firstchird 第一个对象内容,可以是换行符或缩进,存在文档中的内容都可以会被返回
tmp.lastchild 最后一个对象内容
tmp.childNodes 所有对象内容
tmp.parenNode 节点(元素)的父节点,直接使用parentElement,以上方法不实用
tmp.chirdren 其变量的子元素，tmp.chirdren[0]如果有多个值取其下标
tmp.firstElementChild 取其第一个元素
tmp.lastElementChild 取其最后一个元素
tmp.parentElement 取其元素的父类元素
tmp.nextElementSibling 取其下一个相邻的标签元素（兄弟标签）
tmp.previousElementSibling 取其上一个相邻的标签元素（兄弟标签）
dom操作（在dom中你只要能获取到值就能修改）
input标签操作：
var tmp = document.getElementById('inner1').lastElementChild
tmp.value 获取到input框值是“ ” ，此时在输入值，输入tmp.value就能获取该值
tmp.lastElementChild.value='123' 在页面中也显示了该值，dom命令和页面的交互的
innerText 修改目标元素的文本内容 如果赋值的内容 <p></p>包含标签的字符串，依旧会以字符串的形式存储
innerHtml 如果赋值的内容 包含标签的字符串 他会直接转成标签元素<p></p>
select标签操作：
s1.value='xxxx' value值操作
s1.selectedIdex=2 selectedIdex下标操作，下标按数组取值
通过字符串操作css样式：
tmp="样式表中内容"
通过list方式操作css样式：
tmp.classlist 查看当前样式表下标和字符串
tmp.classlist.remove('xxx1') 删除字符串样式
tmp.classlist.add('xxx2') 增加字符串样式
直接通过style属性进行修改：
tmp.style.width='200px' 修改宽度
补充：
在html中css样式的时候写 style="background-color:red"
在dom命令中写css样式的时候写(dom不解析“-”，去"-"后面字母变成大写) tmp.style.backgroundColor='red'
dom操作原标签中的style属性
删除属性
xxx.removeAttribute('value')
添加属性
xxx.setAttribute('value','xxxxxxx') 通过字典的取值方式xxx.setAttribute[0]
创建标签
1.对象创建
document.createElement('xxx') 再通过setAttribute添加属性，只能一个一个添加
获取添加父类位置
div.appendChild(xxxx) 向当前div增加xxxx
2.字符串创建
var input = "<input type='text' value='xxx' id='xxxxx'>" 定义一个字符串
获取添加父类位置
div.insertAdjacentHTML("beforeBegin",input) 参数"beforeBegin"插入到获取标签的前面
div.insertAdjacentHTML("afterBegin",input) 参数"afterBegin"插入到获取到子标签的前面
div.insertAdjacentHTML("beforeEnd",input) 参数"beforeEnd"插入到获取到子标签的后面
div.insertAdjacentHTML("afterEnd",input) 参数"afterEnd"插入到获取标签的前面
event事件 事件也相当与一个function
onclick 单击事件var a.onclick = function (){alert("aaa");}当点击按钮后会弹出提示框 ondblclick双击
onfocis/onblur 获取焦点/失去焦点
onkeydown 某个键盘按键被按下,应用场景,登录时回车
onchange 当内容发生改变就会触发,如三级联动
onload onload事件会在游览器加载完成后才会触发,在head中加入window.load = function (){alert("aaa");}
onmouseover 当鼠标进入时触发
onmouseout 当鼠标离开时触发
onmousemove 当鼠标移动时触发
onmousedown 当鼠标被按下时触发
onselect 文本被选中
onsubmit 确认按钮被点击,与form标签绑定
方式一:
<form id='form' onsubmit='return check()'>
xxxxxx
</form>
<script>function check(event){alert('验证失败');return false;}</script>
方式二:
var a = document.getElementByid('form')'';
a.onsubmit= function(event){ event.preventDefault() } //preventDefault阻止form生成
绑定事件两种方式
1. <div id='id1' onclick='func()'></div>直接通过属性绑定
2. var obj = document.getElementsByClassName('inner')[0]
obj.onclick = function(){alert('1234')} 与html脱离,写在js中更加隐秘
事件传播
对象.stopPropagation() 阻止事件向外层div传播
版权声明：本文原创发表于 博客园，作者为 RainBol 本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。