JS操作HTML方法

最新推荐文章于 2023-05-17 18:01:40 发布
最新推荐文章于 2023-05-17 18:01:40 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： JS的重要笔记 文章标签： html javascript input div function 文档

1.                getElementById(id)
这是通过id来访问某一元素，最常用的之一，例：
<html>
<body>
<div id="myid">
test
</div>
<script language="javascript">
alert(document.getElementById("myid").innerHTML);
</script>
</body>
</html>
注意点：如果元素的ID不是唯一，则会取得第一个该ID名称的元素

2.                getElementsByName(name)
这是通过name来取得某一堆元素（作为数组），看Element后面有个小s就知道了，ID是HTML文档中要求唯一的，name可以不是唯一，如checkbox、radio等地方会用到多个input用同一个name来识别是否为同党。对了，getElementsByName(name)仅用于取得input、radio、checkbox等元素，如<input name="myradio" type="radio" />

3.                getElementsByTagName(tagname) 看这方法就知道这也是取得某一堆元素（作为数组），是通过TagName也就是标签名来取得。你可以遍历这个数组获得每一个单独的元素。当一个DOM结构很大时，可以通过它来有效地缩小搜查范围。
<html>
<head>
<script>
function test() {
testall=document.getElementsByTagName("body");
testbody=testall.item(0); //获得所有tagName是body的元素（当然每个页面只有一个）
testall=testbody.getElementsByTagName("p");// 获得body子元素种的所有P元素
testnode=testall.item(1); // 获得第二个P元素
alert(testnode.firstChild.nodeValue); //显示这个元素的文本
}
</script>
</head>
<body>
<p>hi</p>
<p>hello</p>
<script language="javascript">
test();
</script>
</body>
</html>

4.                appendChild(node)
向当前的元素（应该叫对象比较恰当）追加节点。
<html>
<body>
<head>
</head>
<div id="test"></div>
<script type="text/javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>
</body>
</html>
刚才我在第一个例子中为了显示出内容，用了innerHTML，刚才看到文章才得知innerHTMl不属于DOM。

5.                removeChild(childreference)
删除当前节点的子节点，返回被删除的节点。
这个被删除的节点可以被插入到别的地方
<html>
<body>
<div id="parent"><div id="child">A child</div></div>
<script language="javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("parent").removeChild(childnode)
</script>
</body>
</html>

6.                cloneNode(deepBoolean)
复制并返回当前节点的复制节点，复制节点是一个孤立节点，它复制了原节点的属性，在把这个新节点加入到document前，根据需要修改ID属性确保其ID的唯一。
这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。
<html>
<body>
<p id="mynode">test</p>
<script language="javascript">
p=document.getElementById("mynode")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
</script>
</body>
</html>

7.                replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
<html>
<body>
<div id="mynode2">
<span id="orispan">span</span>
</div>
<script language="javascript">
var orinode=document.getElementById("orispan");
var newnode=document.createElement("p");
var text=document.createTextNode("test ppp ");
newnode.appendChild(text);
document.getElementById("mynode2").replaceChild(newnode, orinode);
</script>
</body>
</html>

yuanweihuayan
关注
专栏目录
html之js操作
Jason的博客
06-26 378
一、浏览器窗口内置对象 window.location.href = url; 修改当前浏览器窗口显示的资源路径 var searchStr = window.location.search; 静态页面跳转传值 二、js获取html标签对象 1.根据选择器获取 （1）根据id获取唯一对对象 var e = document.getElementByld(idStr); （2）根据类class选择器获取对象数组 var arr = document.getElementsByClassName(classS
js的.html()方法,JS-HTML DOM remove() 方法
weixin_28730403的博客
06-25 2282
定义和用法remove() 方法用于从下拉列表删除选项。语法selectObject.remove(index)说明该方法从选项数组的指定位置移除 元素。如果指定的下标比 0 小，或者大于或等于选项的数目，remove() 方法会忽略它并什么也不做。实例下面的例子可从列表中删除被选的选项：function removeOption(){var x=document.getElementById(...
在HTML网页中书写JavaScript
热门推荐
pengjunlee的博客
10-30 5万+
参考书籍：《JavaScript 权威指南----ECMAScript5+HTML5DOM+HTML5BOM》编著：张亚飞 1.使用<script>元素定义JavaScript脚本代码 在HTML文档中，可以使用使用<script>元素向HTML页面中插入JavaScript脚本，<script>元素的语法格式如下： <script type...
五、JS操作HTML方法
weixin_30781107的博客
04-13 114
1.js事件 例如最基本的，onbluer 获得焦点，onchenge 修改文本，onclick 鼠标点击事等等。这类代码写到标签中，<div onclick="函数名"></div>,这里注意的是函数名的双引号。 2.dom的window操作 window.open(url,name,spers,replace);注意此处的四个人属性值都加双引号用逗号...
如何用JS操作HTML（基础）
最新发布
Li5306的博客
05-17 2236
delete oYm.name => delete是操作符, oYm.name是操作数.修改style属性的backgroundColor属性,就可以让页面上的div的背景色改变.3:函数调用.每次方法的使用,都是在写函数调用表达式. => 先不考虑。数据属性都以on开头。双目运算符 => 操作数是2个的运算符.(大多数运算符都是双目)2:操作符表达式 => 不同操作符返回的值不一样的.没有=的属性是布尔属性.这种属性的属性值用js表示就是布尔值.以下对style对象的修改，实际上修改的是标签的行间样式。
如何在js中实现html语言,JavaScript与HTML的结合方法详解
weixin_31874603的博客
05-30 2918
HTML中的JavaScript脚本必须位于与标签之间，JavaScript脚本可被放置在HTML页面的标签和标签中，这种视情况而定，一般放在标签内。一、 标签如需在HTML页面中插入JavaScript脚本，请使用标签。和会告诉JavaScript在何处开始和结束。和之间的代码行包含了JavaScript：alert("欢迎来到JavaScript世界！！！");您无需理解上面的代码。只需明白，...
JavaScript操作HTML元素和样式的方法详解
12-28
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。  实例 <p id=p1>This is a paragraph. <p id=p2>This...
js+html5操作sqlite数据库的方法
10-22
在JavaScript和HTML5的组合中，我们可以利用Web SQL API来操作SQLite数据库。SQLite是一个轻量级的、嵌入式的关系型数据库，适用于客户端存储数据。本文将深入探讨如何使用JavaScript封装HTML5操作SQLite数据库的类...
JS操作HTML自定义属性的方法
10-24
JS操作HTML自定义属性的方法是前端开发中非常重要的一个知识点。在HTML中，除了标准的属性之外，我们经常需要添加一些自定义属性来存储特定的信息，这些信息通常用于JavaScript在页面上进行数据处理和逻辑操作。那么...
JavaScript 实现HTML DOM增删改查操作的常见方法详解
12-29
本文实例讲述了JavaScript 实现HTML DOM增删改查操作的常见方法。分享给大家供大家参考，具体如下： 首先 js 可以修改HTML中的所有元素和属性，它还可以改变CSS样式，并且可以监听到所有事件并作出响应，这篇笔记呢 ...
js转html实体的方法
11-24
JavaScript（JS）是一种广泛用于网页和网络应用的脚本语言，它经常被用来操作和处理HTML文档对象模型（DOM）。在HTML中，某些字符有特殊含义，例如 `用于开始一个标签，`>` 用于结束一个标签，`&` 用于表示特殊字符...
js操作html元素
xiaoyaGrace的博客
03-05 174
<form name="form1" id="form1"> <table id="tab" border="1px" style="border-collapse:collapse;"> <caption>测试</caption> <tr> ...
js html() 操作,JS操作html元素认知
weixin_30466329的博客
07-09 1521
web.jpegJS有三部分组成ECMAscript(欧洲计算机制造商协会) ： 描述了JS的语法和基本对象的规范DOM：文档对象模型，处理网页的内容方法和接口(操作页面元素)BOM ：浏览器对象模型，浏览器交互的方法和接口(操作浏览器)JS操作html元素，其实就是操作DOM文档对象,整个html 文件就是是一个文档，那么这个文档看成一个文档对象，文档中的所有的标签都可以看成一个对象, 那么JS...
js操作html显示,JS操作HTML方法
weixin_39963534的博客
06-18 1127
1.js事件例如最基本的，onbluer 获得焦点，onchenge 修改文本，onclick 鼠标点击事等等。这类代码写到标签中，2.dom的window操作window.open(url,name,spers,replace);注意此处的四个人属性值都加双引号用逗号隔开。url：打开的链接的地址。name：打开方式有四种，默认为_blank 打开新窗口_parent 打开到付及框架_s...
JS控制HTML内容
WEB前端--彭亚平
11-28 1196
HTML 操作非表单和按钮元素 如 div p a span 等标签//改变对象内的HTML内容 对象.innerHTML = 内容;//获得对象内的HTML内容 var data = 对象.innerHTML;Value 操作表单 如 input textarea 等标签 //改变对象内的内容 对象.value = 内容;//获得对象内的内容 var data = 对象.value;
JavaScript操作HTML常用方法记录
.NET 方向项目经验分享
06-26 488
JavaScript操作HTML常用方法收集
JavaScript在HTML中的使用方法（一）
Rabbit-Sir的博客
08-08 478
内联写法 <script language="JavaScript"> console.log("Hello World !") </script> <script type="text/javascript"> console.log("Hello World !") </script> 外联写法 <script type="text/j...
几个关于HTML的js方法
Un_Believable的博客
07-07 441
//加入收藏  function addBookmark(title) {       var url=parent.location.href;       if (window.sidebar) {               window.sidebar.addPanel(title, url,"");        } else if( document.all ) {          
在html页面用js方法,在HTML中使用JS方法总结
weixin_35782250的博客
06-03 1394
这次给大家带来在HTML中使用JS方法总结，在HTML中使用JS的注意事项有哪些，下面就是实战案例，一起来看一下。前言JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本，浏览器加载网页时，就会执行脚本，从而操作浏览器，实现各种动态效果JavaScript代码嵌入网页的方法1、元素直接嵌入代码function sayHello() {alert("hello!");}...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值