首页 > 代码库 > day16
day16
## 一、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=http://www.mamicode.com/”css.css”>加载进来的样式属性"color: #000000">每一段标记都可以通过树中的一个节点来表示：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‘); ```
day16
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。