前端笔记-dom

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本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。