## 属性和方法
以上属性和方法可适用于所有 HTML 元素：
| 属性 / 方法 | 描述 |
| :-- | :-- |
| [*element*.accessKey](https://www.runoob.com/jsref/prop-html-accesskey.html) | 设置或返回accesskey一个元素 |
| [*element*.addEventListener()](https://www.runoob.com/jsref/met-element-addeventlistener.html) | 向指定元素添加事件句柄 |
| [*element*.appendChild()](https://www.runoob.com/jsref/met-node-appendchild.html) | 为元素添加一个新的子元素 |
| [*element*.attributes](https://www.runoob.com/jsref/prop-node-attributes.html) | 返回一个元素的属性数组 |
| [*element*.childNodes](https://www.runoob.com/jsref/prop-node-childnodes.html) | 返回元素的一个子节点的数组 |
| [*element*.children](https://www.runoob.com/jsref/prop-element-children.html) | 返回元素的子元素的集合 |
| [*element*.classList](https://www.runoob.com/jsref/prop-element-classList.html) | 返回元素的类名，作为 DOMTokenList 对象。 |
| [*element*.className](https://www.runoob.com/jsref/prop-html-classname.html) | 设置或返回元素的class属性 |
| *element*.clientHeight | 在页面上返回内容的可视高度（不包括边框，边距或滚动条） |
| *element*.clientWidth | 在页面上返回内容的可视宽度（不包括边框，边距或滚动条） |
| [*element*.cloneNode()](https://www.runoob.com/jsref/met-node-clonenode.html) | 克隆某个元素 |
| [*element*.compareDocumentPosition()](https://www.runoob.com/jsref/met-node-comparedocumentposition.html) | 比较两个元素的文档位置。 |
| [*element*.contentEditable](https://www.runoob.com/jsref/prop-html-contenteditable.html) | 设置或返回元素的内容是否可编辑 |
| [*element*.dir](https://www.runoob.com/jsref/prop-html-dir.html) | 设置或返回一个元素中的文本方向 |
| [*element*.firstChild](https://www.runoob.com/jsref/prop-node-firstchild.html) | 返回元素的第一个子节点,注意文字也是文本节点，eg：`<tr><td id="t1">one</td></tr>`<br>` console.log(document.getElementById("t1").firstChild)//"one"`<br>`<tr><td id="t2"><span>two</span></td></tr>` <br>`console.log(document.getElementById("t1").firstChild)//<span>two</span>`|
| [*element*.focus()](https://www.runoob.com/jsref/met-html-focus.html) | 设置文档或元素获取焦点 |
| [*element*.getAttribute()](https://www.runoob.com/jsref/met-element-getattribute.html) | 返回指定元素的属性值 |
| [*element*.getAttributeNode()](https://www.runoob.com/jsref/met-element-getattributenode.html) | 返回指定属性节点 |
| [*element*.getElementsByTagName()](https://www.runoob.com/jsref/met-element-getelementsbytagname.html) | 返回指定标签名的所有子元素集合。 |
| [*element*. getElementsByClassName()](https://www.runoob.com/jsref/met-element-getelementsbyclassname.html) | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| *element*.getFeature() | 返回指定特征的执行APIs对象。 |
| *element*.getUserData() | 返回一个元素中关联键值的对象。 |
| [*element*.hasAttribute()](https://www.runoob.com/jsref/met-element-hasattribute.html) | 如果元素中存在指定的属性返回 true，否则返回false。 |
| [*element*.hasAttributes()](https://www.runoob.com/jsref/met-node-hasattributes.html) | 如果元素有任何属性返回true，否则返回false。 |
| [*element*.hasChildNodes()](https://www.runoob.com/jsref/met-node-haschildnodes.html) | 返回一个元素是否具有任何子元素 |
| [*element*.hasFocus()](https://www.runoob.com/jsref/met-document-hasfocus.html) | 返回布尔值，检测文档或元素是否获取焦点 |
| [*element*.id](https://www.runoob.com/jsref/prop-html-id.html) | 设置或者返回元素的 id。 |
| [*element*.innerHTML](https://www.runoob.com/jsref/prop-html-innerhtml.html) | 设置或者返回元素的内容。 |
| [*element*.insertBefore()](https://www.runoob.com/jsref/met-node-insertbefore.html) | 现有的子元素之前插入一个新的子元素 |
| [*element*.isContentEditable](https://www.runoob.com/jsref/prop-html-iscontenteditable.html) | 如果元素内容可编辑返回 true，否则返回false |
| [*element*.isDefaultNamespace()](https://www.runoob.com/jsref/met-node-isdefaultnamespace.html) | 如果指定了namespaceURI 返回 true，否则返回 false。 |
| [*element*.isEqualNode()](https://www.runoob.com/jsref/met-node-isequalnode.html) | 检查两个元素是否相等 |
| [*element*.isSameNode()](https://www.runoob.com/jsref/met-node-issamenode.html) | 检查两个元素所有有相同节点。 |
| [*element*.isSupported()](https://www.runoob.com/jsref/met-node-issupported.html) | 如果在元素中支持指定特征返回 true。 |
| [*element*.lang](https://www.runoob.com/jsref/prop-html-lang.html) | 设置或者返回一个元素的语言。 |
| [*element*.lastChild](https://www.runoob.com/jsref/prop-node-lastchild.html) | 返回的最后一个子节点 |
| [*element*.namespaceURI](https://www.runoob.com/jsref/prop-node-namespaceuri.html) | 返回命名空间的 URI。 |
| [*element*.nextSibling](https://www.runoob.com/jsref/prop-node-nextsibling.html) | 返回该元素紧跟的一个节点 |
| [*element*.nextElementSibling](https://www.runoob.com/jsref/prop-element-nextelementsibling.html) | 返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。 |
| [*element*.nodeName](https://www.runoob.com/jsref/prop-node-nodename.html) | 返回元素的标记名（大写） |
| [*element*.nodeType](https://www.runoob.com/jsref/prop-node-nodetype.html) | 返回元素的节点类型 |
| [*element*.nodeValue](https://www.runoob.com/jsref/prop-node-nodevalue.html) | 返回元素的节点值 |
| [*element*.normalize()](https://www.runoob.com/jsref/met-node-normalize.html) | 使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点 |
| *element*.offsetHeight | 返回任何一个元素的高度包括边框和填充，但不是边距 |
| *element*.offsetWidth | 返回元素的宽度，包括边框和填充，但不是边距 |
| *element*.offsetLeft | 返回当前元素的相对水平偏移位置的偏移容器 |
| *element*.offsetParent | 返回元素的偏移容器 |
| *element*.offsetTop | 返回当前元素的相对垂直偏移位置的偏移容器 |
| [*element*.ownerDocument](https://www.runoob.com/jsref/prop-node-ownerdocument.html) | 返回元素的根元素（文档对象） |
| [*element*.parentNode](https://www.runoob.com/jsref/prop-node-parentnode.html) | 返回元素的父节点 |
| [*element*.previousSibling](https://www.runoob.com/jsref/prop-node-previoussibling.html) | 返回某个元素紧接之前元素 |
| [*element*.previousElementSibling](https://www.runoob.com/jsref/prop-element-previouselementsibling.html) | 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。 |
| [*element*.querySelector()](https://www.runoob.com/jsref/met-element-queryselector.html) | 返回匹配指定 CSS 选择器元素的第一个子元素 |
| document.querySelectorAll() | 返回匹配指定 CSS 选择器元素的所有子元素节点列表 |
| [*element*.removeAttribute()](https://www.runoob.com/jsref/met-element-removeattribute.html) | 从元素中删除指定的属性 |
| [*element*.removeAttributeNode()](https://www.runoob.com/jsref/met-element-removeattributenode.html) | 删除指定属性节点并返回移除后的节点。 |
| [*element*.removeChild()](https://www.runoob.com/jsref/met-node-removechild.html) | 删除一个子元素 |
| [*element*.removeEventListener()](https://www.runoob.com/jsref/met-element-removeeventlistener.html) | 移除由 addEventListener() 方法添加的事件句柄 |
| [*element*.replaceChild()](https://www.runoob.com/jsref/met-node-replacechild.html) | 替换一个子元素 |
| *element*.scrollHeight | 返回整个元素的高度（包括带滚动条的隐蔽的地方） |
| *element*.scrollLeft | 返回当前视图中的实际元素的左边缘和左边缘之间的距离 |
| *element*.scrollTop | 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离 |
| *element*.scrollWidth | 返回元素的整个宽度（包括带滚动条的隐蔽的地方） |
| [*element*.setAttribute()](https://www.runoob.com/jsref/met-element-setattribute.html) | 设置或者改变指定属性并指定值。 |
| [*element*.setAttributeNode()](https://www.runoob.com/jsref/met-element-setattributenode.html) | 设置或者改变指定属性节点。 |
| *element*.setIdAttribute() | |
| *element*.setIdAttributeNode() | |
| *element*.setUserData() | 在元素中为指定键值关联对象。 |
| *element*.style | 设置或返回元素的样式属性 |
| [*element*.tabIndex](https://www.runoob.com/jsref/prop-html-tabindex.html) | 设置或返回元素的标签顺序。 |
| [*element*.tagName](https://www.runoob.com/jsref/prop-element-tagname.html) | 作为一个字符串返回某个元素的标记名（大写） |
| [*element*.textContent](https://www.runoob.com/jsref/prop-node-textcontent.html) | 设置或返回一个节点和它的文本内容 |
| [*element*.title](https://www.runoob.com/jsref/prop-html-title.html) | 设置或返回元素的title属性 |
| *element*.toString() | 一个元素转换成字符串 |
| [*nodelist*.item()](https://www.runoob.com/jsref/met-nodelist-item.html) | 返回某个元素基于文档树的索引 |
| [*nodelist*.length](https://www.runoob.com/jsref/prop-nodelist-length.html) | 返回节点列表的节点数目。 |
## **节点组成：**
Document就是文档的根节点
节点= 标签（元素）节点+属性节点+文本节点
nodeType：节点类型
节点名称：nodeName
节点值：nodeValue
例子：
~~~
<ul>
<li>高效的程序员</li>
<li data="1">当世界末日还剩余五分钟的时候</li>
<li>女朋友说：让我们做点什么吧</li>
<li>男朋友说：让我们在做最后一次吧</li>
<li>剩下的的4分50秒做什么</li>
</ul>
<script>
// 节点：属性
var li = document.getElementsByTagName('li');
// 标签节点
console.log('标签节点的类型：'+li[0].nodeType); // 1
console.log('标签节点的名称：'+li[0].nodeName); // LI
console.log('标签节点的值：'+li[0].nodeValue); // null
// 属性节点
// 获取第二个li的属性
var attr = li[1].attributes;
console.log(attr);
console.log('属性节点的类型'+attr[0].nodeType); // 2
console.log('属性节点的名称'+attr[0].nodeName); // data
console.log('属性节点的值'+attr[0].nodeValue); // 1
// node:节点 child:孩子
// 文本节点
var text = li[2].childNodes;
console.log(text);
console.log('文本节点的类型：'+text[0].nodeType); // 3
console.log('文本节点的名称：'+text[0].nodeName); // #text
console.log('文本节点的值：'+text[0].nodeValue); // 女朋友说：让我们做点什么吧
/*
节点：标签+属性+文本
标签.nodeType 属性.nodeName 文本.nodeValue
(*)节点类型(nodeType) 1 2 3
节点名称(nodeName) 返回标签名 返回属性名 #text
节点值(nodeValue) null 属性值 文本内容
*/
~~~
##
## **节点访问：**
**父节点**
获取父节点： parentNode \[子节点对象.parentNode\]
**兄弟节点**
获取上一个兄弟节点： previousSibling
获取下一个兄弟节点： nexSibling
获取下一个兄弟标签节点： nextElementSibling
获取第一个子节点： firstElementChild
**子节点 ：**
所有之节点： childNodes
所有标签子节点： .children
所有标签子节点： .getElementsByTagName("li");
第一个子标签节点[IE9+]： .firstElementChild
第一个子子节点： .firstChild;//等于c1[0]
最后一个子节点： .lastChild;
**创建节点**
创建节点（元素） createElement("标签名")
创建文本节点：createTextNode("文本内容")
创建属性节点：createAttribute("属性名")
**追加节点**
追加文本节点（末尾追加）：appendChild("子节点对象")
在指定的旧子节点前面插入新子节点： insertBefore("新子节点对象", "旧子节点对象")
**克隆节点**
克隆：cloneNode()
克隆子节点：replaceChild("新子节点对象", "旧子节点对象")
**删除节点**
删除节点：removeChild("子节点对象")
**特殊**
innerHTML也可以完成DOM的增删改相关操作
```
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
/* 方法1 */
var parent_ul=document.getElementById("list");
var new_son_li=document.createElement("li");
var li_text=document.createTextNode("a");
new_son_li.appendChild(li_text);
parent_ul.appendChild(new_son_li);
/* 方法2 */
var parent_ul=document.getElementById("list");
var new_son_li=document.createElement("li");
parent_ul.innerHTML+="<li>b</li>";
/*
此方法比较消耗性能他会将li全删掉在插入，一般两种方式结合 */
/* 结合 */
var parent_ul=document.getElementById("list");
new_son_li.innerHTML+="c";
parent_ul.appendChild(new_son_li);
</script>
```
##
## **节点属性操作：**
获取属性：getAttribute
设置属性：setAttribute setAttributeNode(attributeNode)
删除属性：removeAttribute removeAttributeNode(attributeNode)
**创建属性节点**
```
document.createAttribute() //创建一个属性节点
```
获取属性节点
```
element.attributes;//返回一个元素的属性数组
document.getElementById("xxoo").attributes[0];//element.attributes[0]
element.getAttributeNode();//返回指定属性节 document.getElementsByTagName("a")[0].getAttributeNode("target");
element.title;//设置或返回元素的title属性
element.className;//设置或返回元素的class属性
```
**重命名属性**
```
document.renameNode()//重命名元素或者属性节点。
```
**修改属性**
```
element.setAttribute("eg:type","eg:button");//设置或者改变指定属性并指定值。
element.setAttributeNode("eg:class、name、id、value");//设置或者改变指定属性节点。
```
删除属性
```
element.removeAttribute()从元素中删除指定的属性
element.removeAttributeNode()删除指定属性节点并返回移除后的节点。
```
**获取属性的值**
```
element.getAttribute();//返回指定元素的属性值
```
**判断元素中是否有属性**
```
element.hasAttribute("xxoo");//如果元素中存在指定的属性返回 true，否则返回false。
element.hasAttributes();//如果元素有任何属性返回true，否则返回false。
```
**例子:**
1、获取属性
element.getAttribute(‘属性名’)； //返回指定元素属性名的属性值
element.getAttributeNode(‘属性名’)； //返回指定元素的属性名和属性值
element.attributes\[‘属性名’\]；//返回指定元素的属性名和属性值
**获取元素的子节点**
```
/* 获取元素节点 */
var e=document.getElementById("list");
/* 获取该元素的子节点 */
var c=e.getElementsByTagName("li");
var c1=e.childNodes;
//返回包含标签属性及文本节点，标签与标签之间的空格与换行也会被当作文本节点（IE8及以下除外）
var c2 =e.children;//获取所有子标签
var c3=e.firstElementChild;//获取当前元素第一个子标签[IE9+]
var c4=e.firstChild;//等于c1[0]
var c5=e.lastChild;
console.log(e);
console.log(c);
console.log(c1);
console.log(c2);
console.log(c3);
console.log(c4);
```
~~~
<div id="box" class="classa">
这是一个段落
</div>
<script>
var box=document.getElementById("box");
var attr=box.getAttribute('class');
console.log(attr); //classa
var attr2=box.getAttributeNode('id');
console.log(attr2); //id="box";
var attr3=box.attributes['id'];
console.log(attr3); //id="box";
</script>
~~~
2、设置属性
element.setAttribute(name,value); //添加指定的属性，并为其赋指定的值。IE8及以下不支持
element.setAttributeNode(attrNode); //向元素中添加指定的属性节点,如果这个指定的属性已存在，则此方法会替换它
~~~
<div id="box" class="classa">这是一个段落</div>
<script>
var box=document.getElementById("box");
//设置属性
box.setAttribute('class','classb');
console.log(box); //<div id="box" class="classb">这是一个段落</div>
//先创建属性节点，再设置属性值，最后设置属性
var attr=document.createAttribute('name');
attr.nodeValue="p1";
box.setAttributeNode(attr);
console.log(box); //<div id="box" class="classb" name="p1">这是一个段落</div>
</script>
~~~
3、删除属性
element.removeAttribute(‘属性名’); //删除指定的属性,此方法不返回值
element.removeAttributeNode(attrNode); //删除指定的属性，并以 Attr Node 对象返回被删除的属性。
~~~
<div id="box" class="classa">这是一个段落</div>
<script>
var box=document.getElementById("box");
//移除属性
var attr=box.removeAttribute('class');
console.log(box); //<div id="box">这是一个段落</div>
console.log(attr); //undefined
//先获取属性，在删除指定属性
var attr2=box.getAttributeNode('id');
var attr3=box.removeAttributeNode(attr2);
console.log(box); //<div>这是一个段落</div>
console.log(attr2); //id="box"
console.log(attr3); //id="box"
</script>
~~~
向div中追加一段文字
~~~
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
//创建p标签
var para=document.createElement("p");
//创建文本节点
var node=document.createTextNode("这是一个新段落。");
//appendChild() 方法向节点添加最后一个子节点
para.appendChild(node);
//获取父节点
var element=document.getElementById("div1");
//向父节点追加子节点
element.appendChild(para);
//您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
<ul id="myList1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="myList2">
<li>Water</li>
<li>Milk</li>
</ul>
<p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
<button onclick="myFunction()">亲自试一试</button>
<script>
function myFunction()
{
//获取myList2的最后一个子节点
var node=document.getElementById("myList2").lastChild;
//将获取myList2的最后一个子节点追加到myList1最后
document.getElementById("myList1").appendChild(node);
}
</script>
~~~
~~~
<ul>
<li>1.春儿和静静的对话</li>
<li>2早上春儿去厕所，突然发现少了什么东西</li>
<li>3忘记带碗筷了吗？</li>
<li>4滚...</li>
<li>5忘记带纸了吗</li>
<li>6嗯嗯嗯。。。</li>
<li>7呵呵呵呵，看你吃完用什么擦嘴</li>
<li>8呵呵呵</li>
</ul>
<script>
// 获取ul的子节点(ul和li之间，li和li之间有空格，空格是文本节点)
var ul = document.getElementsByTagName('ul')[0];
// 获取li
var list = ul.childNodes;
alert(list);//[object NodeList]
alert(list.length); // 17
function getElement(obj){
// 过滤文本节点，获取标签节点(nodeType)
var arr = [];
for (var i = 0; i < obj.length; i++) {
// 标签节点
if (list[i].nodeType == 1) {
arr.push(list[i]);
}
}
console.log(arr);
}
getElement(list);
</script>
~~~
~~~
<div>
<ul>
<li>合路，你为什么迟到了</li>
<li id="shuijiao">因为我睡过了</li>
<li>你为什么睡过了呢</li>
<li>因为梦里老师讲的好，我想多听会儿</li>
</ul>
</div>
<script>
/*
// 获取子节点
firstChild:
lastChild:
childNodes:
// 获取父节点
parentNode:
// 获取属性节点
attributes:
// 同辈元素
nextSibling:
previouSibling：
*/
var ul = document.getElementsByTagName('ul')[0];
var shuijiao = document.getElementById('shuijiao');
// 获取子节点
console.log(ul.childNodes);
// ul.firstChild:第一个子节点
console.log(ul.firstChild);
// ul.lastChild获取最后一个子节点
console.log(ul.lastChild);
// shuijiao.parentNode:获取父节点
console.log(shuijiao.parentNode);
// nextSibling:获取下一个兄弟节点
console.log(shuijiao.nextSibling);
// previousSibling:获取上一个同辈节点
console.log(shuijiao.previousSibling);
</script>
~~~
~~~
节点的方法
var box = document.getElementById('box');
append:追加
box.appendChild(node):将node追加到box的末尾
insert:插入 before：在。。。之前
box.insertBefore(newNode, oldNode)：在box内，在oldNode的前面插入一个newNode
box.replaceChild(newNode, oldNode):在box内部，将oldNode替换为newNode
box.removeChild(node):删除box内部的node节点
img.cloneNode(true):克隆所有的标签属性和文本节点
img.cloneNode():只克隆标签和属性
~~~
~~~
<div id="box" style="width:600px;height:500px;border:1px solid red;">
</div>
<button>在div#box的末尾追加一张图片</button>
<button>在div#box的第一站图片之前插入一张图片</button>
<button>替换div#box的最后一张图片</button>
<button>用第一张图片替换最后一张图片</button>
<button>删除最后一张图片</button>
<button>克隆第一张图片放到最后</button>
<script>
// 1.获取button按钮对象
var btn = document.getElementsByTagName('button');
var box = document.getElementById('box');
// 2.按钮
btn[0].onclick = function(){
// 2.1 创建图片标签
var img = document. ('img');
img.src = 'tao/'+getRand(1,11)+'.jpg';
// 2.2 将创建的img标签追加到box内
box.appendChild(img);
}
btn[1].onclick = function(){
// 1.获取第一张图片对象
var old = box.firstChild;
// 2.新的图片对象
var newImg = document.createElement('img');
newImg.src = 'tao/'+getRand(1,11)+'.jpg';
// 3.insertBefore()
box.insertBefore(newImg, old);
}
btn[2].onclick = function(){
// 1.找最后一张图片
var oldImg = box.lastChild;
// 2.创建新的图片
var newImg = document.createElement('img');
newImg.src = 'tao/'+getRand(1,11)+'.jpg';
// 3.执行替换
box.replaceChild(newImg, oldImg);
}
// 用第一张替换最后一张
// box.replaceChild(new,old)
/*
一个页面中的对象是独一无二的
*/
btn[3].onclick = function(){
// 1.先获取第一张图片
var newImg = box.firstChild;
// 2.获取最后一张图片
var oldImg = box.lastChild;
// 3.执行替换
box.replaceChild(newImg,oldImg);
}
// 删除最后一张图片
btn[4].onclick = function(){
// 1.获取最后一张图片
var last = box.lastChild;
// 2.执行删除操作
box.removeChild(last);
}
// 将克隆第一个图片放到box的最后位置
btn[5].onclick = function(){
// 1.获取第一个图片对象
var first = box.firstChild;
// 2.克隆之后的节点
var firstImg = first.cloneNode(true);
// 3.将克隆之后的节点放在最后的位置
box.appendChild(firstImg);
}
console.log(btn[3].cloneNode());
console.log(btn[3].cloneNode(true));
// 获取随机数
function getRand(n,m){
return Math.ceil(Math.random()*1000000)%(m-n+1)+n;
}
</script>
~~~
~~~
<a href="http://tokyo-hot.com" data="xiaoxiaoze" title="全球最大的培训基地">兄弟连</a>
<script>
// 获取并改变HTML标签的属性
/*
系统就有的属性：对象.属性值
自定义属性：对象.setAttribute()
对象.getAttribute()
*/
// 获取a连接对象
var link = document.getElementsByTagName('a')[0];
// 获取link的属性
console.log(link.href);
// 改变属性值
link.title = '全宇宙最大的影视基地';
// 自定义的属性不可以直接获取
// console.log(link.data); //undefined
console.log(link.getAttribute('href'));
console.log(link.getAttribute('data'));
// setAttribute()
link.setAttribute('title','北京这会儿好冷，为什么东京这么热呢，因为有东京热');
</script>
~~~
~~~
<body>
<div id="box" style="width:300px;height:300px;">
</div>
<img src="tao/1.jpg" alt="" id="img">
<script>
// 获取并改变html标签样式
var box = document.getElementById('box');
var img = document.getElementById('img');
// 只能获取行内样式
// alert(box.style.width);
// alert(box.style.height);
// alert(box.style.background);
// alert(document.defaultView.getComputedStyle(box,null)['background-color']);
// alert(box.currentStyle['background-color']); // 兼容IE8及其以下的浏览器
// 兼容IE8和火狐谷歌最新的IE
function getStyle(obj, attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return document.defaultView.getComputedStyle(obj,null)[attr];
}
}
alert(getStyle(box, 'background-color'));
// 直接改变html的样式
box.style.width = '500px';
img.width = 100; // 没有单位
img.style.height = '200px';
</script>
~~~
~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hover{
color:red;
font-size: 20px;
background: blue;
}
.click{
color:green;
background: yellow;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>程序员最讨厌康熙的那个儿子</li>
<li>八阿哥（bug）</li>
<li>女朋友给男朋友说：烟盒上有警告，说抽烟有害健康</li>
<li>我只关心error，不关心警告</li>
</ul>
<script>
// 当鼠标放上去的时候，字体变大变红，移开鼠标效果消失
// 1.获取对象
var li = document.getElementsByTagName('li');
// 2鼠标的移入和移出
for (var i = 0; i < li.length; i++) {
li[i].onmouseover = function(){
// this.style.color = 'red';
// this.style.fontSize = '20px';
// this.style.background = 'blue';
// this.style.fontWeight = 'bold';
// 鼠标放上去，如果是click，保留，如果不是click，设置为hover
if (this.className == 'click') {
this.className = 'click';
} else {
this.className = 'hover';
}
}
li[i].onmouseout = function(){
// this.style.color = '#000';
// this.style.fontSize = '16px';
// 如果是点击状态，保持.click
if (this.className == 'click') {
this.className = 'click';
} else {
this.className = '';
}
}
li[i].onclick = function(){
// if (this.style.background == 'yellow') {
// this.style.background = '';
// } else {
// this.style.background = 'yellow';
// }
if (this.className != 'click') {
this.className = 'click';
} else {
this.className = '';
}
}
}
// 任务：当鼠标放上去并且点击的时候，出现改变为红色背景并且不能消失，直到下次点击才能消失
</script>
</body>
</html>
~~~
- CSS
- 达到指定宽度加载css
- 选择器
- CSS 函数
- @media媒体查询
- 字体
- 图标字体
- 文本
- 光标样式cursor
- 盒子模型
- 溢出（overflow）
- 边框
- 不透明度opacity
- 背景(background)与渐变xx-gradient
- 轮廓（outline）与 阴影(box-shadow)
- 过渡属性（Transition）
- 动画属性（Animation）
- transform变形效果旋转，缩放，移动，倾斜等
- 显示、隐藏与禁用
- box-sizing与resize
- 居中对齐
- css水平居中
- css垂直居中
- 文字与相邻的元素垂直对齐
- 布局
- 高度塌陷和外边距重叠最终解决方案
- 解决float布局时高度塌陷的最终方案after伪类元素
- 子/父元素外边距重叠最终解决方案before伪类元素
- 传统布局
- position布局
- position水平居中
- position垂直居中
- position水平垂直居中
- 浮动布局
- 高度塌陷和BFC
- clear
- BFC概念及触发条件
- 表格布局
- 盒子模型布局
- 盒子水平居中布局（如margin:0 auto）
- 盒子垂直居中布局
- 相邻元素外边距重叠
- 行内元素的盒子模型
- 弹性伸缩布局flex
- 旧版本（IE不支持）
- 混合过渡版（仅IE10+生效）
- flex布局（新版）
- 多列布局columns
- grid网格布局（实验性）
- 应用与总结
- 瀑布流布局
- 流式布局(响应式布局又叫百分比布局移动端一般采用)
- 用户不能鼠标左键选择文本
- 表格
- 表单
- radio
- textarea
- select
- a连接
- ul>li有序列表与ol>li无序列表
- 伪元素
- 容器宽高100%
- 浏览器四大内核及前缀
- 移动端开发
- 长度单位与移动端
- css_移动端开发
- rem具体解决方案
- vw具体解决方案
- 兼容性问题
- 浏览器默认样式
- css预处理器
- less
- sass
- stylus
- HTML
- 标签元素
- head的子标签
- 文档元素
- 文本元素
- 嵌入元素
- 分组元素
- 表格元素
- 表单元素
- input
- 标签元素的属性
- 全局属性
- aria-*
- 事件on*
- data-*
- id
- class
- hidden
- style
- title
- draggable
- dropzone(实验性)
- dir
- autocapitalize
- contenteditable
- lang
- inputmode
- accesskey
- contextmenu（移除）
- exportparts(实验性)
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- XHTML遗留xml:lang和xml:base
- part（实验性）
- slot
- spellcheck（实验性）
- tabindex
- translate
- HTML字符实体
- 行内元素
- iframe和父页面相互传值,并兼容跨域问题
- a标签嵌套解决方案
- JS
- 获取宽度（offsetParent、clientWidth、clientHeight、offsetWidth、offsetheight、scrollWidth、scrollHeight、offsetTop、offsetLeft、scrollTop、scrollLeft）
- demo
- 全选和反选
- 定时器：
- 哪些HTML元素可以获得焦点？
- 事件例子
- 鼠标事件
- 注册条款
- 获取鼠标坐标
- div跟随鼠标移动
- 拖拽01
- 鼠标滚动事件
- 键盘事件
- 检查标签是否含有某个类
- 轮播图
- 数组的 交集 差集 补集 并集
- 精确计算插件
- 摇奖机
- 移动端跳转
- 基础
- js的数据类型
- 基本类型声明
- 引用类型声明及用法
- 数组
- 函数
- 对象及函数原型对象
- 继承
- js的垃圾回收机制
- javascript扩展自定义方法
- 类型转换
- 作用域（执行上下文）及递归调用
- javascript事件
- 连续调用
- 排序
- 内存溢出与内存泄漏
- 系统对象
- 内置对象
- 值属性
- Infinity
- NaN
- undefined
- globalThis
- Function 属性
- eval()
- isFinite()
- isNaN()
- parseFloat()
- parseInt()
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
- 基本对象（Object，Function，Boolean，Symbol）
- Object
- defineProperty()
- Function
- Boolean
- Symbol
- 数字和日期对象
- Number
- Date
- BigInt
- Math
- 控制抽象化
- AsyncFunction
- Generator
- GeneratorFunction
- Promise
- Web组装
- WebAssembly
- 结构化数据（JSON等）
- ArrayBuffer
- Atomics
- DataView
- JSON
- SharedArrayBuffer
- 使用键的集合对象
- Map
- Set
- WeakMap
- WeakSet
- 反射
- Reflect
- Proxy
- 可索引的集合对象(数组在这)
- Array数组
- BigInt64Array
- BigUint64Array
- Float32Array
- Float64Array
- Int16Array
- Int32Array
- Int8Array
- Uint8ClampedArray
- Uint8Array
- Uint16Array
- Uint32Array
- 国际化
- Intl
- Intl.Collator
- 文本处理(字符串与正则)
- RegExp
- String
- 错误对象
- Error
- InternalError
- AggregateError 实验性
- EvalError
- RangeError
- ReferenceError
- SyntaxError
- URIError
- TypeError
- null
- TypedArray
- escape()移除但还兼容
- unescape()移除但还生效
- uneval()非标准
- arguments
- 宿主对象（DOM与Browser）
- Browser浏览器对象（BOM）
- Window 对象
- History 对象
- Location 对象
- Navigator 对象
- Screen 对象
- 存储对象(localStorage与sessionStorage)
- DOM 节点对象
- EventTarget
- Node节点对象
- Document文档节点
- HTMLDocument(HTML对象 )
- HTML 元素接口
- Element元素节点
- Attr属性对象（与NamedNodeMap ）
- DocumentType
- DocumentFragment文档片段节点
- CharacterData
- Comment
- Text
- CDATASection
- 事件对象Event
- on-event处理器
- CustomEvent
- MouseEvent
- DragEvent
- 手势（TouchEvent触摸事件）
- 其他类型事件对象...
- CSSStyleDeclaration 对象
- HTMLCollection
- console对象
- MutationObserver
- 其他重要的对象（FormData与原生Ajax）
- FormData表单对象
- ajax XMLHttpRequest
- 表达式和运算符
- 算术运算符
- 赋值运算符
- 按位操作符
- 逗号操作符
- 比较操作符
- 条件运算符
- 解构赋值
- 函数表达式
- 圆括号运算符
- 逻辑运算符
- Nullish 合并操作符
- 对象初始化
- 运算符优先级
- 可选链
- 管道操作符 实验性
- 属性访问器
- 展开语法
- 异步函数表达式
- await
- 类表达式
- delete 操作符
- function* 表达式
- in
- instanceof
- new 运算符
- new.target
- super
- this
- typeof
- void 运算符
- yield
- yield*
- 语句和声明
- export
- default
- 控制流
- block
- break
- continue
- empty
- if...else
- switch
- throw
- try...catch
- 声明
- const
- let
- var 描述
- 函数和类
- async function
- class
- function
- function*
- return
- 迭代
- do...while
- for
- for await...of
- for...in
- for...of
- while
- 其他
- debugger
- label
- with 移除但生效
- import
- import.meta
- 函数
- 箭头函数
- 默认参数值
- 方法的定义
- 剩余参数
- Arguments 对象
- getter
- setter
- 类
- 类私有域
- 类元素
- 构造方法
- extends
- static
- Errors
- 更多
- 已废弃的特性
- JavaScript 数据结构
- 词法文法
- 属性的可枚举性和所有权
- 迭代协议
- 严格模式
- 切换到严格模式
- 模板字符串
- ES6(ES2015)
- Es6函数写法
- 类class
- 导入导出模块
- 兼容ES5
- 变量声明
- Symbol新数据类型
- 迭代器（自定义遍历数组）
- 生成器
- Promise异步编程
- set(集合)
- Map
- 数组新增4个方法
- 手机端事件
- bootstrap手册
- 代码压缩打包
- Webpack
- 五个核心概念
- 开始
- loader
- 插件
- webpack开发环境配置
- 打包含css文件的项目
- 打包html资源
- 打包图片资源
- 打包其他文件
- devServer（实时自动化打包）
- 总结：开发环境配置
- webpack生产环境配置
- 提取css成单独文件
- css兼容性处理
- 压缩css
- js语法检查
- js兼容性处理
- js压缩
- html压缩
- 总结：生产环境配置
- webpack优化环境配置
- HMR( 模块热替换)
- source-map
- oneOf
- 缓存
- tree shaking
- code split
- demo1
- demo2
- demo3
- lazy loading
- pwa
- 多进程打包
- externals
- dll
- webpack配置详解
- entry
- output
- module
- resolve
- dev server
- optimization
- vite
- 技能
- 前端学习路线
- 调试
- 多个版本IE浏览器（调试用）
- 手机端调试
- vueJS
- Element UI（一个vuejs组件）
- 浏览器插件开发
- 插件推荐
- 扩展文件manifest.json
- 不可视的background(常驻)页面
- 可视页面browser actions与page actions及八种展示方式
- 使用chrome.xxx API
- Google Chrome扩展与Web页面/服务器之间的交互
- Google Chrome扩展中的页面之间的数据通信
- inject-script
- chromeAPI
- pageAction
- alarms
- chrome.tabs
- chrome.runtime
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
- 分类
- homepage_url 开发者或者插件主页
- 5种类型的JS对比及消息通信
- 其它补充
- 谷歌浏览器截屏
- 框架及工具
- 前端UI设计网站
- 网页中使用Unicode字符