JS中的DOM
JS HTML DOM
Js可以创建动态的HTML
1:能够改变页面中的所有 HTML 元素
2:能够改变页面中的所有 HTML 属性
3:能够对页面中的所有事件做出反应
一：使用JacaScript可以操作HTML元素，但是要做到这个事情需要先找到该元素，有3种方法：
1：使用ID找到HTML元素 document.getElementById(ID)//获得指定ID值的对象
例子：
<!DOCTYPE html>
<html>
<body>
<p id=”a”>Hello World!</p>
<script>
x=document.getElementById("a");
document.write(x.innerHTML);
</script>
</body>
</html>
2：使用标签吗找到HTML元素 document.createElement(Tag) //创建一个html标签对象
例子：
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>
3：通过类名查找HTML元素 document.getElementsByName(Name)//获得指定Name值的对象
二 document.write()
注意：内容的语法是innerHTML
不要使用在文档加载之后使用 document.write()。这会覆盖该文档
例如document.write() 可以改变HTML内容
<p id=”a”>aaaaa</p>
document.getElementByid(“a”).innerHTML=”bbbbb”
上面P标签的内容会变成bbbbb
三 HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变样式的语法
dcunmen.getElemenByID(ID).style.property=new style
例子
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>上面的段落已被一段脚本修改。</p>
</body>
</html>
四：节点的添加和删除
添加节点
<div id=”div1”>
<p id=”p1”>这是第一句话</p>
<p id=”p2”>这是第二句话</p>
</div>
<script>
Var para=document.createElement(“p”); //创建一个新元素
Var node=document.createTextNode(“这是新的一句话”)；//如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
Para.appendChild(node); //在p元素后面追加上面的文本节点；
Var element=document.getElmentById(“div1”); //找到这个元素
Element.appendChild(“para”); //向上面的元素追加新元素，也就是p元素
</script>
删除节点
想要删除HTML元素必须获得该元素的父元素
<div id=”div1”>
<p id=”p1”>这是第一句话</p>
<p id=”p2”>这是第二句话</p>
</div>
上面的例子中 div元素中有2个p元素，div是p元素的父元素
所以：
先找父元素var fu=document.getElementById(“div1”);
在找子元素 var zi=document.getElementById(“p1”);
从父元素中删除子元素 fu.removeChild(child);
还一种方法是使用parentNode的属性来找到父元素进行删除
找到子元素 var zi=document.getElementById(“p1”);
然后删除 child.parentNode.removeChild(zi);
共同学习，写下你的评论
评论加载中...
作者其他优质文章
