javaScript常用dom操作

---

  原生和jq的一些Dom操作对比

    document
      dom 节点     元素节点   属性节点    文本节点
      $('.box') 元素节点
      $('.box').attr('class')   属性节点
      $('.box').text()   文本节点
      获取元素节点  原生获取 dom 元素  -----> 标签
      var box = $('.box')  获取 jq 的 dom 元素 该元素可以使用 jq 的很多方法
      获取原生 dom 只能使用原生 的一些方法
      document.getElementsByClassName('box')   获取 class 名为 box 的所有元素组成的类数组，想要获取里面的 dom 使用 [下标]
      document.getElementById(id) 根据 id 名获取 dom 结构 只能获取一个
      document.getElementsByTagName(标签名) 根据 标签名获取 dom 结构 能获取多个 存储在类数组内，想要获取里面的 dom 使用 [下标]
      var box = document.getElementsByClassName('box')[0]
      var box = document.getElementsByTagName('div')[0]
      var box1 = document.getElementById('box1')
      var jqBox = $('.box')
      console.log(jqBox)
      console.log(box)
      console.log(box1)

      document.querySelector('css选择器')  根据选择器获取一个 dom 结构
      document.querySelectorAll('css选择器') 根据选择器获取多个 dom 结构放在类数组内，想要获取里面的 dom 使用 [下标]
      var box = document.querySelectorAll('.box')[0]
      console.log(box)
      原生的获取 dom 结构需要注意的: 某些方法能获取多个 dom ，肯定把 dom 放在类数组内，想要获取里面的使用 [下标]

      事件绑定
      原生的事件绑定必须绑定在真正的 dom 节点上。注意有些时候获取的内容是类数组，真正的节点在里面
      jq   $('.box').click(function(){事件做的事})
      原生
      1.在 script 标签内绑定
      document.getElementsById is not a function
      getElementsById 不是前面对象的一个方法

      document.getElementsByTagName('button').onclick = function() {
        // Cannot set property 'onclick' of null
        // 不能设置 null 的 onclick 属性
        // onclick 前面的对象是 null
        console.log('1111')
      }

      2.在元素本身的标签内绑定事件
      需要在 js 内定义一个事件函数 内部写上事件要做的事
      在标签内填写一个 onclick 属性 ,属性值为刚才定义的函数调用 那么就绑定了 click 事件，点击的时候执行函数里面的内容

      function show() {
        console.log('1111')
      }



      document.getElementsByTagName('button')[0].onclick = function() {
      $('.box').css('background-color', 'red') //css 方法修改的是行内样式
      改变样式
      1. 获取原生 dom 的行内样式集合(样式对象)  原生dom.style
      2. 直接对行内样式对象下的某个属性赋值相当于修改了行内样式
      var boxStyle = document.querySelector('.box').style
      boxStyle.height = '300px'
      boxStyle.backgroundColor = 'red'
      boxStyle.width = '400px'
      console.log(boxStyle)

      修改或获取属性的属性值

      获取
       jq  $('.box').attr('title')
       原生  原生dom.getAttribute('属性名')
      var title = document.querySelector('.box').getAttribute('title')
      console.log(title)
      修改
       jq  $('.box').attr('title','要改的值')
      原生 原生dom.setAttribute('属性名','要改的值')
      document.querySelector('.box').setAttribute('title', '123456')

      }

原生常用属性方法

常用属性
1 element.id 设置或返回元素的 id。
2 element.innerHTML 设置或者返回元素的内容，可包含节点中的子标签以及内容
3 element.innerText 设置或者返回元素的内容，不包含节点中的子标签以及内容
4 element.className 设置或者 返回元素的类名
5 element.nodeName 返回该节点的大写字母标签名
6 element.nodeType 返回该结点的节点类型，1表示元素节点 2表示属性节点……
7 element.nodeValue 返回该节点的value值，元素节点的该值为null
8 element.childNodes 返回元素的子节点的nodeslist对象，nodelist类似于数组 有length属性，可以使用方括号 [index] 访问指定索引的值(也可以使用item(index)方法)。但nodelist并不是数组。
9 element.firstChild/element.lastChild 返回元素的第一个/最后一个子节点(包含注释节点和文本节点)
10 element.parentNode 返回该结点的父节点
11 element.previousSibling 返回与当前节点同级的上一个节点(包含注释节点和文本节点)
12 element.nextSibling 返回与当前节点同级的下一个节点(包含注释节点和文本节点)
13 element.childElementCount : 返回子元素(不包括文本节点以及注释节点)的个数
14 element.firstElementChild /lastElementChild 返回第一个/最后一个子元素(不包括文本节点以及注释节点)
15 element.previousElementSibling/nextElementSibling 返回前一个/后一个兄弟元素(不包括文本节点以及注释节点)
16 element.clientHeight/clientWidth 返回内容的可视高度/宽度（不包括边框，
边距或滚动条）
17 element.offsetHeight/offsetWidth /offsetLeft/offsetTop 返回元素的高度/宽度/相对于父元素的左偏移/上偏移(包括边框和填充,不包括边距)
18 element.scrollHeight/scrollWidth/scrollLeft/scrollTop返回整个元素的高度（包括带滚动条的隐蔽的地方）/宽度/返回当前视图中的实际元素的左边缘和左边缘之间的距离/上边缘的距离
19 element.style 设置或返回元素的行内样式属性。
element.style.backgroundColor 注意，与CSS不同，style的属性要去掉横杠，第二个单词首字母要大写
20 element.tagName 返回元素的标签名(大写)
常用方法
1 element.appendChild(nodeName) 向元素添加新的子节点，作为最后一个子节点，并返回该子节点。如需向 HTML DOM 添加新元素，您首先必须创建该元素 ，然后把它追加到已有的元素上。
2 element.getAttribute(para) 返回元素节点的指定属性值。
3 element.getAttributeNode(para) 返回指定的属性节点。
4 element.getElementsByTagName(para) 返回拥有指定标签名的所有子元素的集
合。
5 element.hasAttribute(para) 如果元素拥有指定属性，则返回true，否则返回 false。
6 element.insertBefore(insertNode,appointedNode) 在指定的已有的子节点之前插入新节点。
js演示代码：
var a=document.getElementById('first_form');
var inputList=document.getElementsByTagName('input');
var newNode=document.createElement('input');
var newNode2=document.createTextNode('天马流星拳');
var br=document.createElement('br');
newNode.type='radio';
newNode.name='gongfu';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2]);
a.insertBefore(newNode2,inputList[3]);
a.insertBefore(br,inputList[3]);
7 element.removeAttribute() 从元素中移除指定属性。
8 element.removeChild() 从元素中移除子节点。
9 element.replaceChild(newNode,replaceNode) 把指定节点替换为新节点。
10 element.setAttribute(attrName,attrValue) 把指定属性设置或更改为指定值。
11 element.setAttributeNode() 修改指定属性节点
12 nodelist.item(0) 返回 NodeList 中位于指定下标的节点。
  nodelist[0]

my blog