javaScript中dom操作

最新推荐文章于 2024-07-29 13:58:45 发布

cpf2016

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量317

点赞数

分类专栏： js 文章标签： javascript ViewUI

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

（1）HTML dom树

实际上就是HTML的结构树

（2）查找HTML元素

1.通过id查找

使用document.getElementById("id")

<!DOCTYPE html>
<html>
<body>

<p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>

<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

</body>
</html>

2.通过标签查找

使用document.getElementsByTagName("tag")

注意：这里是elemenets，所以返回的是一个数组

<!DOCTYPE html>
<html>
<body>

<p>你好世界!</p>

<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

</body>
</html>

先通过id确定div，然后通过标签获得所有的<p>。这里需要第一个，所以取数组第一个元素

3.通过类名查找

使用document.getElementsByClassName("class")

注意：这里是elemenets，所以返回的是一个数组

<!DOCTYPE html>
<html>
<body>

<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>

<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>

（3）改变HTML

1.改变html内容

通过innerHTML即可

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

2.改变html属性

通过属性名即可

document.getElementById(id).attribute=new value

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

也就是先获得image，然后将图片变为landscape.jpg这张

3.创建新的html元素

必须要先创建元素，然后向一个已经存在的元素追加该元素

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

4.删除html元素

找到父元素和元素本身，通过父元素来删除

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

（4）改变CSS

直接改变style即可

document.getElementById(id).style.property=new style

eg：

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

（5）事件绑定

1.绑定事件

也就是对某个事件添加响应

语法：

element.addEventListener(event, function, useCapture);

1）event

表示监听的事件，不是onClick之类的，直接写click

2）function

事件响应函数

3）useCapture

假如一个事件标签本身和它的外部标签都监听了，那么是否是从外到内响应，默认为false，也就是从内到外

注意：可以对同一个事件添加多个响应，而且这多个响应不会覆盖，只会轮流执行

<!DOCTYPE html>
<html>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>

<button id="myBtn">点我</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
    alert ("Hello World!")
}

function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

</body>
</html>

2.移除事件

删除通过addEventListener添加的事件响应

document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}

cpf2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript中dom操作

（1）HTML dom树实际上就是HTML的结构树（2）查找HTML元素 1.通过id查找使用document.getElementById("id")你好世界!该实例展示了 getElementById 方法!x=document.getElementById("
复制链接

扫一扫

专栏目录