JavaScript DOM对象控制HTML元素详解

最新推荐文章于 2021-06-19 12:50:11 发布
最新推荐文章于 2021-06-19 12:50:11 发布
阅读量870 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhou_yujia/article/details/49560889
版权

offsetHeight不包含滚动条 scrollHeight包含滚动条

通过name操作

function getName()
        {
            var count=document.getElementsByName("pn");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        getName();

通过标签名操作 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
    <script>
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        getName();
    </script>

</body>
</html>
得到属性： 


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<a id="aid" title="得到a标签的属性">hello</a>
    <script>
        function getAttr()
        {
            var anode =document.getElementById("aid");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        getAttr();
    </script>

</body>
</html>

设置属性： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<a id="aid" title="得到a标签的属性">hello</a>
<a id="aid2">aid2</a>
    <script>
        function getAttr()
        {
            var anode =document.getElementById("aid");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        function setAttr()
        {
            var anode=document.getElementById("aid2");
            anode.setAttribute("title","setattributr");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        setAttr();
    </script>

</body>
</html>
获取子节点 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <a id="aid" title="得到a标签的属性">hello</a>
    <a id="aid2">aid2</a>
    <script>
        function getAttr()
        {
            var anode =document.getElementById("aid");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        function setAttr()
        {
            var anode=document.getElementById("aid2");
            anode.setAttribute("title","setattributr");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getChildNode()//经验证 JS定义函数必须用驼峰法！
        {
            var childNode=document.getElementsByTagName("ul")[0].childNodes;
            alert(childNode.length);
        }
        getChildNode();
    </script>

</body>
</html>
输出7 为什么呢？ur li后面都有空白项 删去空格输出3

获取父节点（只能有一个父节点）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <a id="aid" title="得到a标签的属性">hello</a>
    <a id="aid2">aid2</a>
    <div>
        <p id="pid">div元素</p>
    </div>
    <script>
        function getAttr()
        {
            var anode =document.getElementById("aid");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        function setAttr()
        {
            var anode=document.getElementById("aid2");
            anode.setAttribute("title","setattributr");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getChildNode()//经验证 JS定义函数必须用驼峰法！
        {
            var childNode=document.getElementsByTagName("ul")[0].childNodes;
            alert(childNode[0].nodeType);
        }
        function getParentNode()
        {
            var div=document.getElementById("pid");
            alert(div.parentNode.nodeName);
        }
        getParentNode();
    </script>

</body>
</html>

增添子节点： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <a id="aid" title="得到a标签的属性">hello</a>
    <a id="aid2">aid2</a>
    <div>
        <p id="pid">div元素</p>
    </div>
    <script>
        function getAttr()
        {
            var anode =document.getElementById("aid");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        function setAttr()
        {
            var anode=document.getElementById("aid2");
            anode.setAttribute("title","setattributr");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getChildNode()//经验证 JS定义函数必须用驼峰法！
        {
            var childNode=document.getElementsByTagName("ul")[0].childNodes;
            alert(childNode[0].nodeType);
        }
        function getParentNode()
        {
            var div=document.getElementById("pid");
            alert(div.parentNode.nodeName);
        }
        function createNode()
        {
            var body=document.body;
            var input=document.createElement("input");
            input.type="button";
            input.value="按钮";
            body.appendChild(input);
        }
        createNode();
    </script>

</body>
</html>

选择性插入节点： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <a id="aid" title="得到a标签的属性">hello</a>
    <a id="aid2">aid2</a>
    <div id="div">
        <p id="pid">div元素</p>
    </div>
    <script>
        function getAttr()
        {
            var anode =document.getElementById("aid");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        function setAttr()
        {
            var anode=document.getElementById("aid2");
            anode.setAttribute("title","setattributr");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getChildNode()//经验证 JS定义函数必须用驼峰法！
        {
            var childNode=document.getElementsByTagName("ul")[0].childNodes;
            alert(childNode[0].nodeType);
        }
        function getParentNode()
        {
            var div=document.getElementById("pid");
            alert(div.parentNode.nodeName);
        }
        function createNode()
        {
            var body=document.body;
            var input=document.createElement("input");
            input.type="button";
            input.value="按钮";
            body.appendChild(input);
        }
        function addNode()
        {
            var div=document.getElementById("div");
            var node=document.getElementById("pid");
            var newNode=document.createElement("p");
            newNode.innerHTML="添加第一个元素";
            div.insertBefore(newNode,node);

        }
        addNode();
    </script>

</body>
</html>
删除节点： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <a id="aid" title="得到a标签的属性">hello</a>
    <a id="aid2">aid2</a>
    <div id="div">
        <p id="pid">div元素</p>
    </div>
    <script>
        function getAttr()
        {
            var anode =document.getElementById("aid");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        function setAttr()
        {
            var anode=document.getElementById("aid2");
            anode.setAttribute("title","setattributr");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getChildNode()//经验证 JS定义函数必须用驼峰法！
        {
            var childNode=document.getElementsByTagName("ul")[0].childNodes;
            alert(childNode[0].nodeType);
        }
        function getParentNode()
        {
            var div=document.getElementById("pid");
            alert(div.parentNode.nodeName);
        }
        function createNode()
        {
            var body=document.body;
            var input=document.createElement("input");
            input.type="button";
            input.value="按钮";
            body.appendChild(input);
        }
        function addNode()
        {
            var div=document.getElementById("div");
            var node=document.getElementById("pid");
            var newNode=document.createElement("p");
            newNode.innerHTML="添加第一个元素";
            div.insertBefore(newNode,node);

        }
        function removeNode()
        {
            var div=document.getElementById("div");
            var p=div.removeChild(div.childNodes[1]);
        }
        removeNode();
    </script>

</body>
</html>

尺寸： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <a id="aid" title="得到a标签的属性">hello</a>
    <a id="aid2">aid2</a>
    <div id="div">
        <p id="pid">div元素</p>
    </div>
    <script>
        function getAttr()
        {
            var anode =document.getElementById("aid");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getName()
        {
            var count=document.getElementsByTagName("p");
            alert(count.length);
            var p=count[0];
            p.innerHTML="world";
        }
        function setAttr()
        {
            var anode=document.getElementById("aid2");
            anode.setAttribute("title","setattributr");
            var attr=anode.getAttribute("title");
            alert(attr);
        }
        function getChildNode()//经验证 JS定义函数必须用驼峰法！
        {
            var childNode=document.getElementsByTagName("ul")[0].childNodes;
            alert(childNode[0].nodeType);
        }
        function getParentNode()
        {
            var div=document.getElementById("pid");
            alert(div.parentNode.nodeName);
        }
        function createNode()
        {
            var body=document.body;
            var input=document.createElement("input");
            input.type="button";
            input.value="按钮";
            body.appendChild(input);
        }
        function addNode()
        {
            var div=document.getElementById("div");
            var node=document.getElementById("pid");
            var newNode=document.createElement("p");
            newNode.innerHTML="添加第一个元素";
            div.insertBefore(newNode,node);

        }
        function removeNode()
        {
            var div=document.getElementById("div");
            var p=div.removeChild(div.childNodes[1]);
        }
        function getSize()
        {
            var width=document.documentElement.offsetWidth||document.body.offsetWidth;
            var height=document.documentElement.offsetHeight||document.body.offsetHeight;
            alert(width+","+height);
        }
        getSize();
    </script>

</body>
</html>





MissZhou要努力
关注
专栏目录
Javascript Dom元素获取和添加详解
10-16
在JavaScript中，DOM...理解并熟练掌握DOM元素的获取和添加是JavaScript前端开发的基础，这对于动态操作网页内容、实现交互功能至关重要。正确使用这些方法和属性，可以有效地构建和修改网页结构，提升用户体验。
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
dom控制html元素编号,JavaScript DOM对象控制HTML元素详解
weixin_33230532的博客
06-19 156
一、DOM对象控制HTML1.方法：getElementsByName() 获取namegetElementsByTagName() 获取元素getAttribute() 获取元素属性setAttribute() 设置元素属性childNodes() 访问子节点parentNode() 访问父节点createElement() 创建元素节点createTextNode() 创建文本...
JS DOM对象控制HTML元素详解
weixin_30439031的博客
07-15 85
JS DOM对象控制HTML元素详解 方法： getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素属性 setAttribute() 设置元素属性 childNodes() 访问子节点 ...
JS DOM对象控制HTML元素
qq_34290202的博客
11-27 196
html> html> head lang="en"> meta charset="UTF-8"> title>title> head> body> p name="pn">hellop> p name="pn">hellop> p name="pn">hellop> p name="pn">hellop> a id="aid" title="得到了a标签的属性">hello ja
JS获取HTML元素属性【转】
weixin_30678349的博客
09-08 72
<script type="text/javascript"> function test() { var d1 = document.getElementById('d1'); var p1 = document.getElementById('p1'); alert(d1.alt); // 仅IE支持 ...
JavaScript DOM元素常见操作详解【添加、删除、修改等】
10-18
DOM（文档对象模型）是JavaScript操作网页的基石。它是一种通过脚本访问和更新文档（如HTML和XML）内容的API。DOM将文档结构视为一棵节点树，包括各种节点类型：元素节点、属性节点和文本节点。 元素节点代表文档中...
javascript DOM 操作
呓语 Beta 2.0
08-01 1167
 javascript DOM 操作一、IE中的操作1.IE中DOM的支持    IE中是以AcitveX来支持DOM的，共有5个版本    Microsoft.XmlDom    MSXML2.DOMDocument    MSXML2.DOMDocument.2.0    MSXML2.DOMDocument.3.0    MSXML2.DOMDocument.4.0    2.创建方法  
DOM（一）——HTML DOM
热门推荐
学会改变自己——才能突破
11-27 2万+
对于B/S开发，客户端与服务器端的交互是非常必要的，JavaScript的提出解决了很多问题，AJAX的提出也解决了异步通信的问题，更加为用户着想了。而DOM是其中非常基础的知识，在学习AJAX的同时，我学习了一下DOM的相关操作，这篇重点讲一下HTML DOM的相关内容，其实就是在HTML网页上进行的各种操作。           一，概述： DOM（对象文档模型（Docume
js实验4.(3)DOM元素操作
I feel lost
04-16 1544
3、DOM用正文为空的dom.html，通过javascript的DOM操作，实现以下html网页(jys.html)：  实现的javascript代码如下： DOM p {font-size:20px} var h1 = document.createElement('h1');//一个节点h1 var title=document.createTextNode("静
Html5使用Dom对象进行操作
MissGentlemen的博客
12-01 780
.div{     width: 300px;     height: 500px;     }       体育 英语 数学 语文 美术 音乐       document.addEventListener('plusready', function(){     //console.log("所有plus api都应该在此事件发生后调
js 的小实验
heiiochange的博客
09-19 409
function test1(){ var a=5; var b=6; if(a>10||b>2){ alert("goodS"); } } function rand1(){ var rand=(Math.round(Math.random()*100)); switch (rand){ case 10: alert("r
JavaScript之HTML的DOM操作
weixin_45072327的博客
08-03 203
getElementById() 返回带有指定 ID 的元素 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组） getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表 getElementsByName() 返回带有指定 name 的所有元素的节点列表 appendChild() 把新的子节点添加到指定...
前端技术面试题
Java技术博客
12-06 1486
--- title : 前端技术（HTML、CSS、JS、JQuery等） 前端技术 在js中怎么样验证数字？ 通过正则表达式/*$/ reg.test(需要判断的字符串) js中如何给string这个类型加方法？ 通过原型链添加方法： String.prototype.go = function(){//在string大对象上添加方法go console.log(this) } '...
javascript之DOM对象操作HTML
背着吉他的蝙蝠女侠的博客
12-04 303
HTML DOM：当网页被加载的时候，浏览器会创建页面的文档对象模型（document object model）。 DOM操作HTML： （1）改变文档的输出流。document.write()，是改变整个文档。 （2）寻找元素。通过id寻找元素，document.getElementById("id名称")；通过标签获取元素，document.getElementsByTagName("
控制HTML元素的显示与隐藏——display和visibility
只在朝暮间的博客
08-02 1万+
</head> <body> <div>display：元素的位置不被占用</div> <div id="div1" style="display:block;">DIV 1</div> <div id="div2" style="display:none;">DIV 2</div> <hr> <div>visibility：元素的位置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值