笔记2-2_5_节点属性访问操作

节点的属性

1.offsetTop

这个属性是只读的，无法通过改变这个属性来设定元素的位置。但是style.top可以通过设定来修改元素位置.
返回值：

1. 该元素是body或者没有相关联的布局盒子，返回0
2. 返回该元素的边框顶端的纵坐标，减去该元素的 offsetParent 的内边距顶端的纵坐标，得到的值。//其实就是该元素的top的值
3. 如果offsetParent为空，则返回与body计算得出的值。

2.offsetLeft

返回值：

1. 该元素是body或者没有相关联的布局盒子，返回0
2. 返回该元素的边框左侧横坐标，减去该元素的 offsetParent 的内边距左侧横坐标，得到的值。 //该元素的left的值
3. 如果offsetParent为空，则返回与body计算得出的值。

这两个属性，是根据距离最近的非静态定位祖先元素(offsetParent)进行定位

3.offsetWidth

（包含border外边缘以内的所有内容的宽度,即包含border和padding的宽高）

1. 该元素没有相关联的布局盒子，返回0

2. 返回该元素的边框边缘宽度

   4.offsetHeight

3. 该元素没有相关联的布局盒子，返回0

4. 返回该元素的边框边缘高度

   var div = document.querySelector('div');
   alert(div.offsetLeft); //返回的是一个数字、只能取得，不能改变
   alert(div.offsetTop); //返回的是一个数字、只能取得，不能改变
   alert(div.offsetWidth);
   alert(div.offsetHeight);

5.attributes：取得当前元素的所有属性

//不怎么经常用

<div attr1="val1" attr2="val2" attr3="val3" attr4="val4" attr5="val5"></div>
var div = document.querySelector('div');
var attrs = div.attributes;
for(vari=0; i<attrs.length; i++) {
  // attrs[i] //属性节点
  console.log(attrs[i].nodeType); //2
  console.log(attrs[i].nodeName); //attr1
  console.log(attrs[i].nodeValue); //val1
  console.log(attrs[i]); //attr1="val1"
}
attrs['attr1']; //节点，节点.nodeValue===>val1

节点的访问

//已知一个节点对它的家族进行访问

1.取其父元素节点：parentNode

<div>
  <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
  </ul>
  <p class="p">p1</p>
  <p>p2</p>
</div>
<script>
  var p1 = document.querySelector('p');
  console.log(p1.parentNode); //DIV
</script>

2.取前一个兄弟节点：previousSibling

包含文本节点（即换行）
取前一个兄弟元素节点 ：previousElementSibling

var li2 = document.querySelector('div ul li:nth-of-type(2)')
console.log(li2.previousElementSibling.innerHTML) //0

3.取下一个兄弟节点：nextSibling

包含文本节点（即换行）
取下一个兄弟元素节点：nextElementSibling

console.log(p1.nextElementSibling.innerHTML); //p2

4.取其下一代(儿子)节点:childNodes

儿子元素节点： children //返回值是一个伪数组

var a = document.querySelector('ul').children
console.log(a[0].innerHTML); // 0

5.特殊节点

var div = document.getElementById(‘test’)

祖宗：div.ownerDocument
大儿子：div.firstChild（包含空文本节点）
小儿子：div.lastChild（包含空文本节点）

节点的操作

//这里的操作可理解为已知一个元素节点。根据家族进行操作

1.创建元素节点

创建元素节点 document.createElement(tagName)
功能：创建一个元素节点
参数：字符串，节点的类型。例如：’div’、’span’、’td’
返回值：新创建的元素节点

var div = document.createElement('div');

创建文本节点 document.createTextNode(str)
功能：创建一个文本节点
参数：节点的文本内容。
返回值：新创建的文本节点

var textNode = document.createTextNode('hello world');

//此时节点并没有在DOM树上,只是在内存中

2.插入节点

挂DOM树上： 父节点.appendChild(创建的节点)

//创建的节点放在该父节点最下面 
var adddiv = document.createElement('div');
adddiv.innerHTML = '新节点';
adddiv.background ='red';
document.getElementsByClassName('p')[0].appendChild(adddiv);
// document.getElementsByClassName('p')[0],创建的节点放在该节点的最下面；
// 在className为p的节点最后加了一个div

父节点.insertBefore(创建的新节点, 被插入节点)

var addli = document.createElement('li');
addli.innerHTML = '新加的li';
li2.parentNode.insertBefore(addli,li2)

3.删除节点: 父节点.removeChild(删除的节点)

var lastli = document.querySelector('div ul li:last-of-type')
document.querySelector('ul').removeChild(lastli)

4.克隆节点： 被复制节点.cloneNode(是否复制子节点)

var newNode = addli.cloneNode(true); //false不复制子节点
addli.parentNode.appendChild(newNode)