查找html元素的方法、修改html输入流、属性和样式

来源：互联网发布：淘宝站外推广怎么做编辑：程序博客网时间：2024/06/06 07:38

DOM（Document Object Model）

文档对象模型

HTML DOM 结构

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

查找 HTML 元素

通过ID查找元素

function change() {document.getElementById("jredu").style.color="red";}

通过类名称查找元素

function change1() {var result=document.getElementsByClassName("qut");/*数组类型的数据*/for(vari=0;i<result.length;i++){result[i].style.fontSize="30px";}}

通过名字查找元素

function change2() {var result=document.getElementsByName("qut");/*数组类型数据*/for(vari=0;i<result.length;i++){result[i].style.fontSize="30px";}}

通过标签查找元素

function change3() {var result=document.getElementsByTagName("p");/*数组类型数据*/for(vari=0;i<result.length;i++){result[i].style.fontSize="30px";result[i].style.color="red";}}

appendChild() 把新的子节点添加到指定节点。

语法

node.appendChild(node)

function copyImg() {/*找到图片*/var old1=document.getElementById("img");/*复制图片*/var image1=old1.cloneNode();document.body.appendChild(image1);}

removeChild() 删除子节点。

语法

node.removeChild(node)

function remove() {var img=document.getElementById("img");document.body.removeChild(img);}

replaceChild() 替换子节点。

语法

node.replaceChild(newnode,oldnode)

function replace() {var img=document.getElementById("img");var newImg=document.createElement("img");newImg.src="../../../img/f3_Android2.png";document.body.replaceChild(newImg,img);}

insertBefore() 在指定的子节点前面插入新的子节点。

语法

node.insertBefore(newnode,existingnode)

function newImg() {/*创建一个新图片*/var image=document.createElement("img");/*添加属性 用.符号法*/image.src="../../../img/f3_Android5.png";var old=document.getElementById("img");var div=document.getElementById("div");div.insertBefore(image,old);}

createElement() 创建元素节点。

语法：

createElement(name)

cloneNode() 克隆节点

定义和用法

cloneNode() 方法创建节点的拷贝，并返回该副本。

cloneNode() 方法克隆所有属性以及它们的值。

如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

语法

node.cloneNode(deep)

function clone() {var li3=document.getElementById("li3");/*参数为false：只复制标签，标签内的内容和子元素不复制*参数为true：不仅复制标签，标签内的内容和子元素都复制*/var lia3=li3.cloneNode(true);var ul=document.getElementById("ul");ul.insertBefore(lia3,li3);}

改变 HTML 输出流

document.write( )

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Sat Aug 05 2017 16:27:28 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html><html><body><script>document.write(Date());</script></body></html>

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

.innerHTML

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

实例

本例改变了 <p> 元素的内容：

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

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

改变 HTML 属性

.attribute

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

实例

本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html><html><body><img id="image" src="smiley.gif"></body></html>

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

改变 HTML 样式

.style.property

如需改变 HTML 元素的样式，请使用这个语法：

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

下面的例子会改变 <p> 元素的样式：

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

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

阅读全文

0 0