js操作HTML

最新推荐文章于 2023-05-17 18:01:40 发布
最新推荐文章于 2023-05-17 18:01:40 发布
阅读量468 收藏
点赞数
分类专栏： 前端相关

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等元素，如<inputname="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">Achild</div></div>
<script language="javascript">
var childnode=document.getElementById("child")
varremovednode=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>

sofia1217
关注
专栏目录
html之js操作
Jason的博客
06-26 362
一、浏览器窗口内置对象 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 2252
定义和用法remove() 方法用于从下拉列表删除选项。语法selectObject.remove(index)说明该方法从选项数组的指定位置移除 元素。如果指定的下标比 0 小，或者大于或等于选项的数目，remove() 方法会忽略它并什么也不做。实例下面的例子可从列表中删除被选的选项：function removeOption(){var x=document.getElementById(...
JS操作HTML方法
sunliangyuan的专栏
04-18 2818
<br />1.                getElementById(id)<br />这是通过id来访问某一元素，最常用的之一，例：<br /><html><br /><body><br /><div id="myid"><br />test<br /></div><br /><script language="javascript"><br />alert(document.getElementById("myid").innerHTML);<br /></script><br /></body
五、JS操作HTML方法
weixin_30781107的博客
04-13 106
1.js事件 例如最基本的，onbluer 获得焦点，onchenge 修改文本，onclick 鼠标点击事等等。这类代码写到标签中，<div onclick="函数名"></div>,这里注意的是函数名的双引号。 2.dom的window操作 window.open(url,name,spers,replace);注意此处的四个人属性值都加双引号用逗号...
如何在js中实现html语言,JavaScript与HTML的结合方法详解
weixin_31874603的博客
05-30 2894
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...
javascript操作html控件实例(javascript添加html)
12-07
代码如下://下拉列表的填充  _showSchools: function (data) { //data代表是一个数据对象  var mySelect = document.getElementById(“selectSchools”); //获取下拉框 mySelect.options.length = 0;...
JavaScript操作HTML DOM节点的基础教程
10-22
主要介绍了JavaScript操作HTML DOM节点的基础入门教程,包括对节点的创建修改删除等操作,还特别提到了其中appendChild()与insertBefore()插入节点时需注意的问题,需要的朋友可以参考下
JS对HTML表格进行增删改操作
11-22
在JavaScript代码中，我们为每个操作编写函数，如`showAddInput()`用于显示添加输入div，`updateRow()`和`delRow()`分别处理修改和删除操作。在这些函数中，我们将处理用户输入、验证数据、更新表格以及管理表格中的...
js操作html元素
xiaoyaGrace的博客
03-05 163
<form name="form1" id="form1"> <table id="tab" border="1px" style="border-collapse:collapse;"> <caption>测试</caption> <tr> ...
如何用JS操作HTML（基础）
最新发布
Li5306的博客
05-17 2184
delete oYm.name => delete是操作符, oYm.name是操作数.修改style属性的backgroundColor属性,就可以让页面上的div的背景色改变.3:函数调用.每次方法的使用,都是在写函数调用表达式. => 先不考虑。数据属性都以on开头。双目运算符 => 操作数是2个的运算符.(大多数运算符都是双目)2:操作符表达式 => 不同操作符返回的值不一样的.没有=的属性是布尔属性.这种属性的属性值用js表示就是布尔值.以下对style对象的修改，实际上修改的是标签的行间样式。
js html() 操作,JS操作html元素认知
weixin_30466329的博客
07-09 1487
web.jpegJS有三部分组成ECMAscript(欧洲计算机制造商协会) ： 描述了JS的语法和基本对象的规范DOM：文档对象模型，处理网页的内容方法和接口(操作页面元素)BOM ：浏览器对象模型，浏览器交互的方法和接口(操作浏览器)JS操作html元素，其实就是操作DOM文档对象,整个html 文件就是是一个文档，那么这个文档看成一个文档对象，文档中的所有的标签都可以看成一个对象, 那么JS...
js操作html显示,JS操作HTML方法
weixin_39963534的博客
06-18 1106
1.js事件例如最基本的，onbluer 获得焦点，onchenge 修改文本，onclick 鼠标点击事等等。这类代码写到标签中，2.dom的window操作window.open(url,name,spers,replace);注意此处的四个人属性值都加双引号用逗号隔开。url：打开的链接的地址。name：打开方式有四种，默认为_blank 打开新窗口_parent 打开到付及框架_s...
JS控制HTML内容
WEB前端--彭亚平
11-28 1180
HTML 操作非表单和按钮元素 如 div p a span 等标签//改变对象内的HTML内容 对象.innerHTML = 内容;//获得对象内的HTML内容 var data = 对象.innerHTML;Value 操作表单 如 input textarea 等标签 //改变对象内的内容 对象.value = 内容;//获得对象内的内容 var data = 对象.value;
JavaScript操作HTML常用方法记录
.NET 方向项目经验分享
06-26 471
JavaScript操作HTML常用方法收集
JavaScript在HTML中的使用方法（一）
Rabbit-Sir的博客
08-08 464
内联写法 <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 432
//加入收藏  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 1382
这次给大家带来在HTML中使用JS方法总结，在HTML中使用JS的注意事项有哪些，下面就是实战案例，一起来看一下。前言JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本，浏览器加载网页时，就会执行脚本，从而操作浏览器，实现各种动态效果JavaScript代码嵌入网页的方法1、元素直接嵌入代码function sayHello() {alert("hello!");}...
【无标题】HTML之js操作
top9523的博客
06-29 177
HTML之js操作
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值