一、通过DOM操作元素的属性
1、操作style属性
书写规则:元素对象.style.样式属性名
例如:
body.style.backgroundColor
background-color --> backgroundColor
font-size --> fontSize
2、操作className属性
通过该属性可以改变元素的class属性值
书写规则: 元素对象.className
例:
<div class=''>用户名:</div>
<input type='text' id='test'>
<span id='a'> </span><br><br>
<button id='bu'>验证</button>
<script>
//var test=document.querySelector('#username');
bu.onclick=function(){
//var b=document.querySelector('s');
if(test.value=='abc'){
a.style.color='red';
a.innerHTML='用户名不可用';
}else{
a.style.color='green';
a.innerHTML='用户名可用';
}
}
</script>
二、获取属性值
1、获取元素的内置属性值
element.属性 或 getAttribute(‘属性’)
2、获取元素的自定义属性值
getAttribute(‘属性’) ,例:
<p id="p1" class="自定义属性" title="">西安邮电大学</p>
三、设置属性值
1、设置内置属性的值
element.属性 = 值
2、设置自定义属性的值
setAttribute('属性','值')
四、移除属性:
removeAttribute('属性')
五、HTML5中自定义属性的实现
通过 ‘data-属性名’ 方式自定义属性
<div data-index='2'></div> -->H5的写法,'data-'是自定义属性的前缀,便于区分自定义属性和内置属性
<div id="dt" index='2'></div> -->H5以前版本的写法
1、在H5设置自定义属性的值的方式
元素对象名.dataset.属性名 = 值
2、H5中获取自定义属性的值
(1)对象名.dataset.属性
(2)对象名.dataset[‘属性’]
(3)getAttribute(‘属性’)
六、节点
一个页面就是一个节点树,页面中的内容就是节点。
1、节点的基本属性
(1)节点类型(nodeType)
A、1表示为元素节点(即标签)
B、2表示为属性节点(标签的属性)
C、3表示为文本节点(标签的内容)
(2)节点名称(nodeName)
(3)节点值(nodeValue)
2、创建新节点
(1)通过createElement创建元素节点(创建标签);通过createTextNode创建文本节点.
(2)通过appendChild方法将新创建的节点添加到当前节点的末尾.
3、插入节点
inserBefore(new,ref),将new节点插入到ref节点之前.
例:
<body>
<h3 id='h'>西安邮电大学</h3>
<form name='frm'>
输入文本:<input type='text' name='txt'>
<input type='button' value='插入节点' onclick="inserNode('h',document.frm.txt.value)">
</form>
<script>
var btn =document.querySelector('button')
btn.onclick=inserNode()
function inserNode(nodeid,str){
var str=document.querySelector('input').value
var newNode=document.createElement('p')
var newTxt=document.createTextNode(str)
newNode.appendChild(newTxt)
var ref=document.querySelector('#'+nodeid)
if(ref.parentNode){
ref.parentNode.insertBefore(newNode,ref)
}
}
</script>
</body>
输入文字点击插入节点会插入该节点:
4、复制节点cloneNode(deep)
deep是逻辑值,true表示深拷贝,即复制当前节点及其所有子节点(默认值).
false表示浅拷贝,只复制当前节点不复制其子节点.