文章目录
JavaScript Dom操作
基础页面
<body>
<div class="main">
<h2>前端语言</h2>
<ul id="List1">
<li id="li1">HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>后端语言</h2>
<ul id="list2">
<li title="C语言">C</li>
<li title="Java语言">Java</li>
<li title="我是Python">Python</li>
<li title="C Sharp">C#</li>
</ul>
</div>
</body>
运行结果
通过ID获取元素
<script>
var c1 = document.getElementById("list1");
var c2 = document.getElementById("li1")
document.write("通过ID获取 ul 标签" + c1 + '<br>');
document.write("通过ID获取 li 标签" + c2);
</script>
显示结果：
innerHTML用于获取或修改p标签内容
<script>
var c1 = document.getElementById("ppp")
document.write(c1.innerHTML + '<br>')
c1.innerHTML = '我是修改后的p标签';
document.write(c1.innerHTML + '<br>')
</script>
显示结果：
改变HTML样式
基本语法格式：Object.style.property=str;
<script>
var c1 = document.getElementById("ppp")
c1.style.color = 'red'
c1.style.fontSize = '30px'
c1.style.fontFamily = '隶书'
c1.style.backgroundColor = '#cccccc'
</script>
显示效果：
改变类选择器
格式object.className = classname
var c1 = document.getElementById("ppp")
c1.className = 'test'
显示结果：
通过name属性获取元素
格式document.getElementsByName(str);
var c1 = document.getElementsByName('myname');
document.write(c1 + '<br>');
document.write('数组的长度为' + c1.length);
显示结果：
通过标签名字获取标签
格式：document.getElementsByTagName(str);
var c1 = document.getElementsByTagName("li");
document.write('li 标签的数量为：' + c1.length);
显示结果：
ID是唯一的。
Name可以重复。
TagName是某一标签类的集合。
获取属性值
格式：elementNode.getAttribute(name)
var c1 = document.getElementsByTagName("li");
document.write('li 标签的数量为：' + c1.length);
for (var i = 0; i < c1.length; i++) {
text = c1[i].getAttribute('title');
if (text != null) {
document.write('<br>' + text)
}
}
设置新属性
elementNode.setAttribute(name,value)
var c1 = document.getElementsByTagName("li");
document.write('li 标签的数量为：' + c1.length);
for (var i = 0; i < c1.length; i++) {
text = c1[i].getAttribute('title');
if (text == "C Sharp") {
c1[i].setAttribute('title', 'C#')
text = c1[i].getAttribute('title')
}
if (text != null) {
document.write('<br>' + text)
}
}
节点对象属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
-
nodeName : 节点的名称
-
nodeValue ：节点的值
-
nodeType ：节点的类型
var c1 = document.getElementsByTagName("li");
for (var i = 0; i < c1.length; i++) {
document.write("<br>节点" + i + "的名称:" + c1[i].nodeName)
document.write("<br>节点" + i + "的类型:" + c1[i].nodeType)
document.write("<br>节点" + i + "的值:" + c1[i].nodeValue)
}
访问子节点
elementNode.childNodes用于访问子节点
node.firstChild用于访问第一个子节点
node.lastChild用于访问最后一个子节点
访问父节点
elementNode.parentNode用于访问父节点
elementNode.parentNode.parentNode用于访问祖节点
访问兄弟节点
-
nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
nodeObject.nextSibling -
previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
nodeObject.previousSibling
如果无兄弟节点，则该属性返回 null。
插入节点
appendChild(newnode)
var c1 = document.getElementById('List1')
var newNode = document.createElement('li')
newNode.innerHTML = 'jQuery'
c1.appendChild(newNode)
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
insertBefore(newnode,node);
var c1 = document.getElementById('List1')
var newNode = document.createElement('li')
var lNode = document.getElementById('List1').firstChild
newNode.innerHTML = 'jQuery'
c1.insertBefore(newNode, lNode)
删除节点
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
nodeObject.removeChild(node)
node ：必需，指定需要删除的节点。
替换元素节点
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
node.replaceChild (newnode,oldnew )
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
创建元素节点
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
document.createElement(tagName)
tagName：字符串值，这个字符串用来指明创建元素的类型。
要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
创建文本节点
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
document.createTextNode(data)
data : 字符串值，可规定此节点的文本。