原生js/css的一些用法

forEach

js

[].forEach.call(
        document.getElementById('items'),
        function(item, index) {
     //     item.getElementsByTagName('p')[0].innerHTML =
     //       (index + 1).toString() + '．'
        }
      )

p标签的文字内容

.innerHTML

复制元素并粘贴到父元素

html

<ul>
	<li id="item">#</li>
</ul>

js

var item = document.getElementById('item').cloneNode(true)  // true: 孩子结构也一并复制
item.id = 'new-item' // [可选] 不设置的话，新元素id和被复制元素id相同
document.getElementById('item').parentNode.appendChild(item)

js获取元素的区别

document.getElementById() 得到一个结点
document.getElementsByClassName() 得到一组结点

.parentNode 得到一个结点
.childNodes 得到一组结点

鼠标移进祖先元素时，孩子元素显示，移出消失

html

<li class="list-group">
	……
		<span class="setting-icon">#</span>
	……
</li>

css

.setting-icon{
  display: none;
}
.list-group:hover .setting-icon {
  display: inline;
  cursor: pointer;
}

textarea, input, 可编辑div 的选择

textarea: 默认可拉伸，此时右下角会有两道短线，也可使用resize:none;去掉短线，但同时也设置了不可拉伸；在元素上使用rows=1可设置可显示行数，没办法直接实现自适应高度。
input: 只可编辑一行，显示高度可以设置，不可拉伸。
可编辑div: 不可拉伸，css可以直接设置自适应宽高，没有placeholder，不过可以用css手动实现。举例：
html

<div 
	contenteditable="true" 
	class="editdiv" 
	placeholder="默认填充"
></div>

css

.editdiv {
  height: auto; /*自适应高度*/
}
.editdiv:empty:before {
  content: attr(placeholder);
  color: rgb(194, 194, 194);
}

.editdiv:focus:before {
  content: none;
}

另：若想让输入框变灰，实现只读，需要在元素上加属性readonly