2017.11.24（js基础）

最新推荐文章于 2023-05-24 17:13:16 发布

qiu969217118

最新推荐文章于 2023-05-24 17:13:16 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/qiu969217118/article/details/78624928

版权

1.JavaScript半知半解

Document：整个文档树的顶层节点  
DocumentType：doctype标签（比如<!DOCTYPE html>）  
Element：网页的各种HTML标签（比如<body>、<a>等）  
Attribute：网页元素的属性（比如class="right"）  
Text：标签之间或标签包含的文本  
Comment：HTML或XML的注释  
DocumentFragment：文档的片段
Document和Element是两个重要的DOM类。

Node属性：
（1）parentNode
该节点的父节点，或者针对类似Document对象应该是null，因为它没有父节点。

（2）childNodes

返回只读的类数组对象（NodeList对象），它是该节点的子节点的实时表。
注意：该属性还包括文本节点和评论节点。

（3）firstChild、lastChild

该节点的子节点中的第一个和最后一个，如果该节点没有子节点则为null
注意：这两个属性返回的除了HTML元素子节点，还可能是文本节点或评论节点。

（4）nextSibling、previousSibling

该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点称为兄弟节点。节点的顺序反映了它们在文档中出现的顺序。这两个属性将节点之间以双向链表形式连接起来。
注意：这两个属性返回的除了HTML元素子节点，还可能是文本节点或评论节点。

（5）textContent

返回该节点和它的所有后代节点的文本内容。

<div id="div">我是<span>textContent</span></div>

document.getElementById('div').textContent  // 我是textContent

（6）nodeType

该节点的类型。
9：Document节点
1：Element节点
3：Text节点
8：Comment节点
11：DocumentFragment节点

（7）nodeValue

Text节点或者Comment节点的文本内容。只有Text节点和Comment节点的nodeValue可以返回结果，其他类型的节点一律返回null。

Node.nextSibling  //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling  //返回当前节点前面的、距离最近的一个兄弟节点


Node.parentNode   //返回当前节点的父节点


Node.childNodes   //返回当前节点的所有子节点
Node.firstChild  //返回当前节点的第一个子节点
Node.lastChild   //返回当前节点的最后一个子节点

节点操作：

Node.appendChild(node)   //向节点添加最后一个子节点
Node.hasChildNodes()   //返回布尔值，表示当前节点是否有子节点
Node.cloneNode(true);  // 默认为false(克隆节点), true(克隆节点及其属性，以及后代)
Node.insertBefore(newNode,oldNode)  // 在指定子节点之前插入新的子节点
Node.removeChild(node)   //删除节点，在要删除节点的父节点上操作
Node.replaceChild(newChild,oldChild)  //替换节点

（2）尺寸属性

Element.clientHeight   //返回元素节点可见部分的高度
Element.clientWidth   //返回元素节点可见部分的宽度
Element.clientLeft   //返回元素节点左边框的宽度
Element.clientTop   //返回元素节点顶部边框的宽度
Element.scrollHeight  //返回元素节点的总高度
Element.scrollWidth  //返回元素节点的总宽度
Element.scrollLeft   //返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
Element.scrollTop   //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight   //返回元素的垂直高度(包含border,padding)
Element.offsetWidth    //返回元素的水平宽度(包含border,padding)
Element.offsetLeft    //返回当前元素左上角相对于Element.offsetParent节点的垂直偏移
Element.offsetTop   //返回水平位移
Element.style  //返回元素节点的行内样式

（2）style操作

element.setAttribute('style','')

element.style.backgroundColor = 'red'

element.style.cssText //用来读写或删除整个style属性

element.style.setProperty(propertyName,value)  //设置css属性
element.style.getPropertyValue(property)  //获取css属性
element.style.removeProperty(property)  //删除css属性
操作非内联样式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)
//伪类
window.getComputedStyle(el,':after')[attrName]