JS中使用DOM来控制HTML元素

1.getElementsByName():获取name.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

例:

<p name="pn">hello</p>

<p name="pn">hello</p>

<p name="pn">hello</p>

<script>

function getName(){

var count=document.getElementsByName("pn");

alert(count.length);

var p=count[2];

p.innerHTML="world";

}

</script>

结果:界面打印出三个hello,并且伴有一个提示框“3”,当点击确定后,界面显示的内容变为hello hello world

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··

2.getElementsByTagName():获取元素。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<p>hello</p>

<p>hello</p>

<p>hello</p>

<script>

function getName(){

var count=document.getElementsByTagName("p");

alert(count.length);

var p=count[2];

p.innerHTML="world";

}

</script>

结果:界面打印出三个hello,并且伴有一个提示框“3”,当点击确定后,界面显示的内容变为hello hello world

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.getAttribute():获取元素属性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<a id="aid" title="得到a的标签属性"></a>

<script>

function getAttr1(){

var anode=document.getElementById("aid");

var attr=anode.getAttribute("id");

alert("a的ID是:"+attr);

}

function getAttr2(){

var anode=document.getElementById("aid");

var attr=anode.getAttribute("title");

alert("a的title内容是:"+attr);

}

getAttr1();

getAttr2();

</script>

结果:弹出提示框“a的ID是:aid”.点击确定后,弹出提示框“a的title内容是:得到a的标签属性”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4.setAttribute()设置元素属性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<a id="aid2">aid2</a>

<script>

function setAttr(){

var anode=document.getElementById("aid2");

anode.setAttribute("title","动态设置a的title属性");

var attr=anode.getAttribute("title");

alert("动态设置的title值为:"+attr);

}

setAttr();

</script>

结果:弹出提示框“动态设置的title值为:动态设置a的title属性”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

5.childNodes():访问子节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~··

<ul><li>1</li><li>2</li><li>3</li></ul>

<script>

function getChildNode(){

var childnode=document.getElementsByTagName("ul")[0].childNodes;

alert(childnode.length);

alert(childnode[0].nodeType);

}

getChildNode();

</script>

结果:界面打印出.1 .2 .3弹出对话框“3”,按确定后弹出“1”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

6.parentNode():访问父节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

<div>

<p id="pid"></p>

</div>

<script>

function getParentNode(){

var div=document.getElementById("pid");

alert(div.parentNode.nodeName);

}

getParentNode();

</script>

结果:弹出提示框:DIV.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

7.createElement():创建元素节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例:

<script>

function createNode(){

var body=document.body;

var input=document.createElement("input");

input.type="button";

input.value="按钮";

body.appendChild(input);//插入节点

}

createNode();

</script>

结果:出现一个按钮。

~~~~~~~~~~~~~~~~~~~~~~~~~~~

8.createTextNode():创建文本节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例:

<script>

function createNode(){

var element = document.createElement("div");

element.className = "message";

var textNode = document.createTextNode("Hello world!");

element.appendChild(textNode);

document.body.appendChild(element);

}

createNode();

</script>

代码分析:这个例子创建了一个新<div>元素并为它指定了值为“message”的class特性。然后,又创建了一个文本节点,并将其添加到前面创建的元素中。最后一步,就是将这个元素添加到了文档中的<body>元素中,这样可以在浏览器中看到新创建的元素和文本节点了。

结果:页面显示hello world。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

9.insertBefore():插入节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 例

<div id="div">

<p id="pid">p元素</p>

</div>

<script>

function addNode(){

var div=document.getElementById("div");

var node=document.getElementById("pid");

var newnode=document.createElement("p");

newnode.innerHTML="动态插入一个p元素";

div.insertBefore(newnode,node);

}

addNode();

</script>

结果:界面打印出:动态插入一个p元素

                         p元素

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

10.removeChild():删除节点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

 例

<div id="div">

<p id="pid">p元素</p>

</div>

<script>

function removeNode(){

var div=document.getElementById("div");

var p=div.removeChild(div.childNodes[1]);

}

removeNode();

</script>

结果:界面什么也没显示。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

11.offsetHeight:网页尺寸

12.scrollHeight:网页尺寸

~~~~~~~~~~~~~~~~~~~~~~~~~~~·

例:

<script>

function getSize(){

var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题

var height=document.documentElement.offsetHeight||document.body.offsetHeight;

alert(width+","+height);

}

getSize();

</script>

显示结果:

这篇文章主要介绍了JS DOM 来控制HTML元素,文章内容主要包括关于DOM,HTML等,文章来自网络,请参考。

以上是 JS中使用DOM来控制HTML元素 的全部内容, 来源链接: utcz.com/z/320358.html

回到顶部