DOM基础操作笔记

一、获取元素的方法

1.通过ID获取 document.getElementById("id名")；

2.通过标签名获取 ele/document.getElementsByTagName("标签名") 集

3.通过类名获取 ele/document.getElementsByClassName("class名") 集合

4.通过name(表单)属性获取 document.getElementsByName("name值)

5.通过选择器获取 ele/document.querySelector()  只能获得第一个符合条件的内容

                            ele/document.querySelectorAll() 获取所有符合条件的内容

6.获取head标签  document.head

7.获取body  document.body

8.获取html标签  document.documentElement

9.获取屏幕的高度或宽度

document.documentElement.clienHeight||document.body.clienHeight  高度

document.documentElement.clienWidth||document.body.clienWidth 宽度

 二、节点

1.文档节点

noteType: 9        nodeName  #document   nodeValue  null

2.属性节点

nodeType: 2       nodeName:属性名              nodeValue 属性值

3.元素节点

nodeType: 1      nodeName: 标签名大写        nodeValue  null

4.文本（对象）节点 获取子节点

nodeType: 3      nodeName:"#text"   nodeValue  文本内容

5.注释节点 

nodeType:8      nodeName:#comment        nodeValue: 注释的内容

三、节点查找方式

//查找父节点 parentNode

//查找子节点  childNode

//找第一个子节点 firstChild

//找最后一个子节点 lastChild

//下面的一个兄弟  nextSibling

//上面一个兄弟   previousSibling

四、元素查找方式

//查找子元素  children

//查找第一个元素 firstElementChild

// 查找最后一个元素 lastElementChild

// 查找下一个兄弟元素 nextElementSibling

// 查找上一个兄弟元素 previousElementSibling

五、属性操作

 DOM的增删改

1.creatElement: 创建一个元素

2.creatTextNode  创建一个文本节点

3.appendChild  把元素追加到一个容器的末尾

4.insertBefore 把一个元素插入到另一个元素的前面   交换

var insertNode= 父节点.insertBefore(newNode,referenceNode )

<div id="id1">

  <p class="p1" id="p1">这是P1</p>

</div>

<script>

  var div = document.getElementById('id1');

  var p1 = document.getElementById('p1');

  var odiv = document.createElement("div");

  var returnDom = div.insertBefore(odiv, p1);

console.log(div)

</script>

5.cloneNode:把一个节点克隆

ele.cloneNode();只克隆节点，但里边的内容和样式都没克隆

ele.cloneNode(true);把节点所包含的所有内容全部克隆

6.removeChild： 移除某个节点  context.removeChild(ele);

7.setAttribute 设置当前元素的某一个自定义属性

  getAttribute 获取当前元素的某一个自定义属性

    remove Attribute 删除当前元素的某一个自定义属性