访问 / 更新文本节点
nodeValue
- 这个属性节点允许访问或修改文本节点的内容。
-
使用nodeValue属性时,必须在文本节点上操作,而不再包含的文本元素节点上操作。
操作HTML内容
-
innerHTML
-
使用innerHTML属性可以得到这个元素的内容,他以一个很长的字符串的形式返回,其中有该元素所包含的标签。
-
-
textContent
-
仅访问文本内容
-
-
DOM操作
访问或更新属性值
-
className / id
-
有一些的对象属性和方法可以用来操作HTML属性。 可以用此来获取或更新其class或id属性
-
-
hasAttribute ---- 检查属性
-
getAttribute ---- 获取属性
-
setAttribute ---- 更新属性
-
removeAttrbute ---- 移除属性
nodeValue
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div
_____________________________________________________
var itemTwo = document.getElementById('two'); // 获取第二列的列表项
var elText = itemTwo.firstChild.nodeValue; // 得到文本内容
elText = elText.replace('pine nuts', 'kale'); // 替换文本内容
itemTwo.firstChild.nodeValue = elText; // 使用nodeValue属性,将文本节点的内容更新为新的 值
返回上层目录
innerHTML
<div id="one"></div>
——————————————————————————————————————————————————————————————————
<script>
var item = document.getElementById("one");
var str = "将innerHTML插入到页面之中";
item.innerHTML = str;
</script>
<div id="one"></div>
<script>
var item = document.getElementById("one");
var str = "innerHTML可以插入标签";
item.innerHTML = '<a href=\"http://example.org\">' + str + '</a>';
</script>
返回上层目录
textContent
<div id="one"></div>
——————————————————————————————————————————————————————————
<script>
var item = document.getElementById("one");
var str = "将textContent插入到页面之中";
item.textContent = str;
</script>
<div id="one"></div>
<script>
var item = document.getElementById("one");
var str = "textContent不能插入标签";
item.textContent = '<a href=\"http://example.org\">' + str + '</a>';
</script>
返回上层目录
DOM操作 ---- 添加,删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id="todo">
<li id="one">fresh figs</li>
<li id="two">pine nuts</li>
<li id="three">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<script>
//添加操作
var newEl = document.createElement('li'); //创建一个新的元素节点
var newText = document.createTextNode('quinoa'); //创建一个新的文本节点
newEl.appendChild(newText); //将文本节点中的内容加入到元素节点中
var position = document.getElementsByTagName('ul')[0];
position.appendChild(newEl); //将元素节点添加到对应的DOM树中
//删除操作
var removeEl = document.getElementsByTagName('li')[3]; //第一步 :将需要删除的元素保存到一个变量中
var containerEl = document.getElementsByTagName('ul')[0]; //第二步 : 把该元素的父元素保存到变量中
containerEl.removeChild(removeEl); //第三步 :把元素从它的包含元素中移除
</script>
</body>
</html>
返回上层目录
访问或更新属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id="todo">
<li id="one" class="hot">fresh figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="cool">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="scriptResults"></div>
<script>
var firstItem = document.getElementById('one'); //得到id为“one”的节点
//hasAttribute检查元素节点是否包含特定的属性
var str = firstItem.hasAttribute('class'); //检测其是否包含class属性
alert(str);
//getAttribute得到属性值
var attr = firstItem.getAttribute('class'); //得到其属性值
var el = document.getElementById('scriptResults');
el.innerHTML = '<p>The first item has a class name: ' + attr + '</p>'; //得到其className
//更改其属性值
//className只能更改class的值。id只能更改id属性的值
firstItem.className = 'complete'; //将class值直接变为complete
var attr1 = firstItem.getAttribute('class');
el.innerHTML = '<p>The first item has a class name: ' + attr1 + '</p>';
//setAttribute能更新任何HTML属性的值——————它使用两个参数,(属性名称,该属性值)
var fourthItem = document.getElementsByTagName('li').item(3);
fourthItem.setAttribute('class', 'cool');
//removeAttribute删除其属性
var firstItem = document.getElementById('one');
if (firstItem.hasAttribute('class')) {
firstItem.removeAttribute('class');
}
</script>
</body>
</html>