DOW

酒酒max
111 阅读4分钟
dow:document object model 文档对象模型
顶层对象：document

获取html标签

1.获取html标签：document.documentElement
2.获取body标签：document.body
3.获取head标签：document.head
4.获取title标签：document.title
5.修改title标签：document.title = 值

获取标签

1.通过id名：document.getElementById('id名')
2.通过标签名：document.getElementsByTagName('标签名')
3.通过类名：document.getElementsByClassName('类名')
4.通过标签的name属性：document.getElementsByName('name属性的值')
5.通过css选择器获取一个标签：document.querySelector('css选择器')
6.通过css选择器获取全部标签：document.quertSelectorAll('css选择器')

内容操作

1.获取文本内容：标签.innerText
2.设置文本内容：标签.innerText = 值      //操作纯文本，只能获取文本，设置标签不能被解析
3.获取标题内容：标签.innerHTML
4.设置内容：标签.innerHTML = 值         //可以操作带标签的内容，标签可以被获取到，设置标签可以被解析
5.获取表单元素内容：value

设置样式

1.设置样式：标签.style.css键 = 值(除了数字外，所有的值都是字符串)
    box.style.width = '300px'
2.设置样式时，css键有连字符，使用[]或者小驼峰写法
    比如：box.style.background-color = 'ff0'
        []写法：box.style['background-color'] = 'ff0'
        小驼峰写法：box.style.backgrounColor = 'ff0'

设置类名

1.标签.className = '类名'
    比如：box.className = 'red box'
2.标签.className = ' '  不起类名

标签属性操作

1.添加属性：标签.setAttribute(键,值)
2.修改属性：标签.getAttribute(键,值)
3.获取属性的值：标签.getAttribute(键)
4.删除属性：标签.removeAttribute(键)
5.利用属性操作设置样式：
    div.setAttribute('style','width:100px;height:100px;background-color=#f00')
6.利用属性操作设置类名：
    div.setAttribute('class','border')

属性

1.属性：标签属性，css属性，对象属性
2.获取到的标签其实都是对象。需要用console.dir()来输出
3.标签对象也是有属性的，可以使用 对象属性的操作方式来操作标签对象
4.有些标签的某些标签属性会跟标签对象中的属性重合，我们就可以使用两种方式来操作标签的了

节点获取

 1.获取所有子节点：父.childNodes
 2.获取所有子标签节点：父.children
 3.获取父的第一个子节点：父.firstchild
 4.获取父的第一个子标签节点：父.firstElementchild
 5.获取最后一个子节点：父.lastchild
 6.获取最后一个子标签节点：父.lastElementchild
 7.获取父节点：子.parentNode
 8.获取父标签节点：子.parentElement
 9.获取下一个兄弟节点：哥哥.nextSibing
 10.获取下一个兄弟标签节点：哥哥.nextElementSibing
 11.获取上一个兄弟节点：弟弟.previousSibing
 12.获取上一个兄弟标签节点：弟弟.previousElementSibing

节点操作

1.创建节点：document.createElement('标签名')
2.插入节点：
          （1）将标签放在父标签的末尾作为子标签：父标签.appendChild(子标签-标签对象)
          （2）将新标签放在某个已存在的子标签前面：父标签.insertbefore(新标签，已存在的子标签)
3.替换节点：父标签.replacechild(新标签，已存在的子标签) 
4.删除节点：父标签.removeChild(被删除的子标签)
5.复制节点：标签.cloneNode()  
    //默认只能复制空标签，如果要复制内容就需要给cloneNode添加参数-True，
    标签.cloneChild(True)

获取元素样式

获取元素样式：window.getComputedStyle(标签)

获取元素的坐标

获取元素的坐标：
              1.标签.offsetleft
              2.标签.offsetTop
              获取到的是相对于设置过定位的父元素的位置
              Top是关键字，代表window

获取元素的大小

获取元素的大小：
        1.
              (1).标签.clientWidth    
              (2).标签.clientHeight   
                  获取的大小不包含边框
        2.
               (1).offsetWidth
               (2).offsetHeight
                   获取的大小包含边框

获取窗口大小：

       document.documentElement.clientWidth
       document.documentElement.clientHeight
       窗口的大小不包含滚动条
       
       获取body大小：
           document.body.clientWidth
           document.body.clientHeight

获取滚动过的距离

卷去的高度：
    document.documentElement.scrollTop
卷去的宽度
    document.documentElement.scrollLeft

短路运算

利用 || 和 && 给变量根据不同的情况赋予不同的值
|| 或者，左边的数据会转成布尔值，根据 || 进行判断是否能得到true，
    如果左边得到true，或者连接的整体可以得到true，就将第一个值赋值给变量
    如果左边得到false，就将第二个值赋值给变量
短路运算就是一种赋值操作，只是其中有&&和||参与了。将连接的两个值经过判断选择其中一个赋值给变量
avatar
文章
阅读
粉丝