您的位置：首页 > Web前端 > JavaScript

JS中的DOM

2017-11-03 09:22 267 查看
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);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  DOM
相关文章推荐
新的分享
章节导航