继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS中的DOM

kala16
关注TA
已关注
手记 260
粉丝 18
获赞 134

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);

 




打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP