08 更多事件 自定义属性操作 节点操作 实战演练
更多事件
onmouseover
鼠标经过事件
onmouseout
鼠标离开事件
自定义属性操作
getAttribute()
一般获取元素属性的手段在07 Document获取元素 事件 元素属性选择 实战演练中有提到过
如果该属性是标签的属性，则可以直接
标签.属性名=属性;如果该属性是其css的style属性，则需要
标签.style.属性名=属性;
但是如果是程序员自定义的属性，js就没有这么方便的包装了
这就需要新的方法getAttribute()
例子
console.log(div.getAttribute('id'));//console.log(div.id);
console.log(div.getAttribute('class'));//console.log(div.className);
console.log(div.getAttribute('index'));
补充
className是个特殊的存在，对应的是标签里面的class
setAttribute()
和getAttribute()同样的道理，这个方法是用于设置属性的
语法
element.setAttribute('属性', '值');
例子
div.setAttribute('id', 2);//div.id = '2';
div.setAttribute('class', 'footer');//div。className=‘footer’
removeAttribute()
移除属性
语法
element.removeAttribute('属性');
dataset
h5新增的获取自定义属性的方法 它只能获取data-开头的属性
dataset 是一个集合里面存放了所有以data开头的自定义属性
例子
一般形式
div.dataset.index;//div.getAttribute('data-index')
div.dataset['index'];//div.getAttribute('data-index')
特殊形式：如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
div.dataset.listName;//div.getAttribute('data-list-name')
div.dataset['listName'];//div.getAttribute('data-list-name')
节点操作
意义
目前我们学习到的获取元素的方式是通过DOM获取元素，其逻辑性不强，而且繁琐，而利用层级关系获取元素则可以利用父子兄节点关系获取元素，逻辑性强，但是兼容性稍微比较差
种类
元素节点
一般操作的都是元素节点
属性节点
文本节点
基本属性
nodeType
| nodeType值 | 对应的节点 |
|---|---|
| 1 | 元素节点 |
| 2 | 属性节点 |
| 3 | 文本节点 |
nodeName
借鉴W3School的定义和用法
nodeName 属性指定节点的节点名称。
如果节点是元素节点，则 nodeName 属性返回标签名。
入股节点是属性节点，则 nodeName 属性返回属性的名称。
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。
nodeValue
借鉴W3School的定义和用法
nodeValue 属性设置或返回指定节点的节点值。
**注释：**如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值（element.childNodes[0].nodeValue）。
常见的节点操作
父节点操作（属性）
parentNode
得到的是离元素最近的父级节点(亲爸爸)，如果找不到父节点就返回为 null
子节点操作（属性）
childNodes
所有的子节点 包含 元素节点 文本节点等等
children
获取所有的子元素节点 也是我们实际开发常用的
firstChild
第一个子节点 不管是文本节点还是元素节点
lastChild
最后一个子节点 不管是文本节点还是元素节点
firstElementChild
返回第一个子元素节点 ie9才支持
常用以下来代替
ol.children[0]
lastElementChild
返回最后一个子元素节点 ie9才支持
常用以下来代替
ol.children[ol.children.length - 1]
兄弟节点操作（属性）
nextSibling
下一个兄弟节点 包含元素节点或者 文本节点等等
previousSibling
上一个兄弟节点 包含元素节点或者 文本节点等等
nextElementSibling
得到下一个兄弟元素节点
previousElementSibling
得到上一个兄弟元素节点
创建和添加节点（方法）
createElement()
返回创建的新的元素节点
语法
document.createElement(标签名)
appendChild()
appendChild() 方法向节点添加最后一个子节点。
语法
节点.appendChild(子节点)
insertBefore()
insertBefore() 方法在您指定的已有子节点之前插入新的子节点
语法
节点.insertBefore(新的子节点, 已有子节点);
实战演练
论坛留言
要求
一个留言框可以输入文字
一个发送按钮可以发送文字
一个论坛界面可以显示发送过的文字
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>论坛留言</title>
<style type="text/css">
body{
background-color: gray;
}
*{
margin: 0px;
padding: 0px;
}
.w{
margin: 0 auto;
width: 600px;
}
header{
height: 60px;
background-color: white;
color: aquamarine;
font-size: 40px;
text-shadow: 10px 10px 10px rgba(19, 243, 225, 0.3);
text-align: center;
}
.content{
height: 500px;
background-color: white;
overflow: auto;
}
#messages-count_tip{
text-align: center;
}
.input_area{
padding: 30px 0px;
border: 2px solid gray;
background-color: white;
}
.input_area textarea{
display: block;
margin: 0px auto;
font-size: 16px;
color: #635e7d;
resize:none
}
#submit{
float: right;
height: 20px;
width: 50px;
margin:5px 20px;
}
.message{
width: 550px;
height: 110px;
margin: 5px auto;
padding: 0px 8px;
background-color: aliceblue;
}
.message-user_name{
height: 25px;
font-size: 20px;
color: #808080;
}
.message-content{
height: 60px;
overflow: auto;
}
.message-date{
float: right;
height: 15px;
font-size: 14px;
color: #666180;
}
</style>
</head>
<body>
<header class="w">
biang论坛
</header>
<div class="w content">
<div id="messages-count_tip">
</div>
</div>
<div class="w input_area">
<textarea rows="10" cols="70">请输入内容</textarea>
<input type="button" id="submit" value="发布" />
</div>
<script type="text/javascript">
var count=0;
var messageCountTip= document.getElementById('messages-count_tip');
function refleshCount(){
if(count==0){
messageCountTip.innerText='论坛冷清清，没有人发言';
}else{
messageCountTip.innerText='论坛正在火热发言中，共'+count+'条发言';
}
}
var textarea = document.querySelector('.input_area textarea');
var button = document.getElementById('submit');
textarea.onfocus=function(){
if(textarea.value=='请输入内容'){
textarea.value='';
textarea.style.color='black';
}
}
textarea.onblur=function(){
if(textarea.value==''){
textarea.value='请输入内容';
textarea.style.color='aliceblue';
}
}
button.onclick=function(){
var str=textarea.value;
var message=document.createElement('div');
var messageUserName =document.createElement('div');
var messageContent =document.createElement('div');
var messageDate =document.createElement('div');
message.setAttribute('class','message');
messageUserName.setAttribute('class','message-user_name');
messageContent.setAttribute('class','message-content');
messageDate.setAttribute('class','message-date');
messageUserName.innerText='biang';
messageContent.innerText=str;
messageDate.innerText=new Date();
message.appendChild(messageContent);
message.insertBefore(messageUserName,messageContent);
message.appendChild(messageDate);
var content=document.getElementsByClassName('content')[0];
content.appendChild(message);
count++;
refleshCount();
}
refleshCount();
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
