day16

aizheng0775
于 2016-10-31 00:00:00 发布
阅读量60
点赞数
原文链接：http://www.cnblogs.com/qinhaifeng/p/6014490.html
版权
## 一、inner.HTML属性： ##

 1.**innerHTML: 设置或获取标签对中的内容( 识别HTML )**

 2.** innerText: 获取文字内容( IE ) textContent: 获取文字内容(FF,chrom)**
 ```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="div">
      <p>hello</p>
      js
    </div>
  </body>
</html>
 ```
```javascript
(function () {
  var div=document.getElementById('div')
  alert(div.innerHTML);
// 输出<p>hello</p> js
  alert(div.textContent);
  // 输出 hello js;
  alert(div.innerText)
  //IE浏览器上面特有的支持属性，在IE输出hello js

  var text;
  if(div.textContent!== undefined){
    text = div.textContent;
  }else{
    text = div.innerText
  }
  alert(text);
  //吃方法用于兼容IE浏览器上面不支持textContent属性的方法
  div.innerHTML = 'hello world'
  //直接修改div里面原有的内容，输出 hello world
  div.innerHTML = '<input type="passworld" >'
  // 页面输出的实际效果为一个可以输入的文本框
  div.textContent = 'hello world'
  // 也直接把内容替换成 hello world
  div.textContent ='<input type="passworld" >'
  //1.此方法浏览器不能把它解析为input输入框，会把他解析为文本内容<input type="passworld" >。2.也是它与inne.HTML两者之间的区别
  var box = document.getElementById('box')
  alert(box.currentStyle.width)
  //获取元素的宽度
})();
```
**元素样式获取的几种方法**

1、element.style:只能获取写在元素标签中的style属性里的样式值，无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性
每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示.总共有12种节点类型，这些类型都继承自一个基类型.
```javascript
var ele = document.getElementById('ele');
ele.style.color;    //获取颜色
```
2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。
```javascript
window.getComputedStyle("元素", "伪类");
这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:before”） 。如果不需要伪元素信息，第二个参数.DS_Store可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用
var ele = document.getElementById('ele');
var styles = window.getComputedStyle(ele,null);
styles.color;  //获取颜色
可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法，需要使用后面的方法。对于Firefox和Safari，会把颜色转换成rgb格式
```
3、element.currentStyle:IE 专用，返回的是元素当前应用的最终CSS属性值：（包括外链CSS文件，页面中嵌入的style属性等）
```javascript
var ele = document.getElementById('ele');
var styles = ele.currentStyle;
styles.color;
注意：对于综合属性border等，ie返回undefined，其他浏览器有的返回值，有的不返回，但是borderLeftWidth这样的属性是返回值的
```
4、getPropertyValue()：获取CSS样式的直接属性名称
```javascript
var ele = document.getElementById('ele');
window.getComputedStyle(ele,null).getPropertyValue('color');
注意：属性名不支持驼峰格式，IE6-8不支持该方法，需要使用下面的方法
```
5、getAttribute()：与getPropertyValue类似，有一点的差异是属性名驼峰格式
```javascript
var test = document.getElementById('test');
window.getComputedStyle(test, null).getPropertyValue("backgroundColor");
注意：该方法只支持IE6-8。
```
下面的获取样式方法兼容IE、chrome、FireFox等
```javascript
function getStyle(ele) {
     var style = null;

    if(window.getComputedStyle) {
         style = window.getComputedStyle(ele, null);
     }else{
         style = ele.currentStyle;
     }

    return style;
}
```
## 节点类型(Node类型)
每个节点都有一个`nodeType`属性，用于表明节点的类型.节点类型由`Node`类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

- Node.ELEMENT_NODE(1) ✔️
- Node.ARRTIBUTE_NODE(2) ✔️
- Node.TEXT_NODE(3) ✔️
- Node.CDATA_SECTION_NODE(4)
- Node.ENTITY_REFERENCE_NODE(5)
- Node.ENTITY_NODE(6)
- Node.PROCESSING_INSTRUCTION_NODE(7)
- Node.COMMENT_NODE(8) ✔️
- Node.DOCUMENT_NODE(9) ✔️
- Node.DOCUMENT_TYPE_NODE(10)
- Node.DOCUMENT_FRAGMENT_NODE(11)
- Node.NOTATION_NODE(12)

通过比较上面这些常量，可以很容易地确定节点的类型

```javascript
if(someNode.nodeType == 1) {
    alert('这个节点是一个元素节点');
}
```

## 节点关系
节点间的各种关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。在HTML中，可以将元素看成是元素的子元素；相应地，也就可以将元素看成是元素的父元素。而元素，则可以看成是元素的兄弟元素(同胞元素)，因为它们都是同一个父元素的直接子元素.

## 获取节点
#### 通过元素获取
- document.getElementById("elementID");
- document.getElementsByTagName("tagname");
- document.getElementsByName("name");
- document.getElementsByClassName("classname");
- ......

#### 通过节点关系属性获得引用
- `someNode.parentNode`: 获取该元素父节点
- `someNode.childNodes`: 获取对象所有的子节点,只包含次级节点
- `someNode.firstChild`: 获取该元素第一个子节点
- `someNode.lastChild`: 获取该元素最后一个子节点
- `someNode.nextSibling`: 获取该下一个兄弟节点
- `someNode.previousSibling`: 获取该元素上一个兄弟节点

## 操作节点
### `appendChild(childNode)`
操作节点中最常用的方法是`appendChild()`，用于向`childNodes`列表的末尾添加一个节点.添加完成后，`appendChild()`会返回新增的节点.

使用方法：

```javascript
someNode.appendChild(anotherNode);
```

如果传入到`appendChild()`中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置.因此，如果在调用`appendChild()`时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点.

```javascript
//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true
```

### `insertBefore(childNode, nextNode)`
如果需要把节点放在`childNodes`列表中某个特定的位置上，而不是放在末尾，那么可以使用`insertBefore()`方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（`previousSibling`），同时被方法返回。如果参照节点是`null`，则`insertBefore()`与`appendChild()`执行相同的操作.

```javascript
// 插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true

// 插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true

// 插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length - 2]); //true
```

### `replaceChild(newNode, removeNode)`
`replaceChild()`方法接受的两个参数是：要插入的节点和要替换的节点.要替换的节点将由这个 方法返回并从文档树中被移除，同时由要插入的节点占据其位置.

```javascript
// 替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

// 替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);
```

### `removeChild(removeNode)`
如果只想移除而非替换节点，可以使用`removeChild()`方法.这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值.

```javascript
// 移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);

// 移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);
```

> 前面介绍的四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点（使用 parentNode属性）.另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法，将会导致错误发生.

### `cloneNode(isDeepCopy)`
用于创建调用这个方法的节点 的一个完全相同的副本.`cloneNode()`方法接受一个布尔值参数，表示是否执行深复制。在参数为`true`的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为`false`的情况下，执行浅复制，即只复制节点本身。复制后返回的节点并没有为它指定父节点。因此，除非通过`appendChild()`、`insertBefore()`或 `replaceChild()`将它添加到文档中，否则它并不会在文档中显示.

例如，假设有下面的 HTML 代码:

```html
<ul>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
</ul>
```

如果我们已经将`<ul>`元素的引用保存在了变量`myList`中，那么通常下列代码就可以看出使用 `cloneNode()`方法的两种模式：

```javascript
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); // 当浏览器为IE8及更低版本的IE时，结果为3，其他浏览器结果为7
var shallowList = myList.cloneNode(false); alert(shallowList.childNodes.length); //0
```

`deepList.childNodes.length`中的差异主要是因为IE8及更早版本与其他浏览器处理空白字符的方式不一样.IE9之前的版本不会为空白符创建节点.

### `document.createElement(tagName)`

通过标签名创建一个元素节点。`document.createElement()`方法接受一个字符串参数，这个字符串即为标签名字.

```javascript
var myDiv = document.createElement('div');
```