javascript操作DOM元素

最新推荐文章于 2023-08-09 18:31:11 发布
最新推荐文章于 2023-08-09 18:31:11 发布
阅读量877 收藏
点赞数
分类专栏： javascript 文章标签： htm5 前端 网页设计 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bboyjoe/article/details/46927859
版权

1）HTMLElement的元数据属性：

checked——获取或设置checked属性是否存在；

classList——获取或设置元素所述的类列表（返回DOMTokenList）；

             classList.add(<class>)——给元素添加指定的类；

             classList.contains(<class>)——如果元素属于指定的类就返回true；

             classList.length——返回元素所属类的数量；

             classList.remove(<class>)——从元素上移除指定的类；

             classList.toggle(<class>)——如果类不存就添加它，如果存在就移除它；

className——获取或设置元素所属的类列表；

dir——获取或设置dir属性的值；

disabled——获取或设置disabled属性是否存在；

hidden——获取或设置hidden属性是否存在；

id——获取或设置id属性的值；

lang——获取或设置lang属性的值；

spellcheck——获取或设置spellcheck属性是否存在；

tabIndex—获取或设置tabindex属性的值；

tagName——返回标签名（标识元素类型）；

title——获取或设置title属性的值；

2）与HTML属性相关的属性和方法

attributes——返回应用到元素上的属性数组；

dataset——返回以data-开头的属性数组；

getAttribute(<name>)——返回指定属性的值；

hasAttribute(<name>)——如果元素带有指定的属性则返回true；

removeAttribute(<name>)——从元素上移除指定属性；

setAttribute(<name>,<value>)——应用一个指定名称和值的属性；

3）Text对象的成员

appendData(<string>)——把指定字符串附加到文本块末尾；

data——获取或设置文本；

deleteData(<offest>,<count>)——从文本中移除字符串，第一个数字是偏移量，第二个是要移除的字符数量；

insertData(<offset>,<string>)——在指定偏移量出插入指定字符串；

length——返回字符的数量；

replaceData(<offset>,<count>,<string>)——用指定字符串替换一段文本；

replaceWholeText(<string>)——替换全部文本；

splitText(<number>)——将现有的Text元素在指定偏移量出一分为二；

substringData(<offset>,<count>)——返回文本的子串；

wholeText——获取文本；

4）DOM操作成员

appendChild(HTMLElement)——将指定元素添加为当前元素的子元素；

removeChild(HTMLElement)——从当前元素上移除指定的子元素；

replaceChild(HTMLElement,HTMLElement)——替换当前元素的某个子元素；

cloneNode(boolean)——复制一个元素；

compareDocumentPosition(HTMLElement)——判断一个元素的相对位置；

innerHTML——获取或设置元素的内容；

outerHTML——获取或设置某个元素的HTML和内容；

insertAdjacentHTML(<pos>,<text>)——相对于元素插入HTML;

         其中pos(参数)：afterbegin——将片段作为当前元素的第一个子元素插入；

                        afterend——将片段插入当前元素之后；

                        beforebegin——将片段插入当前元素之前；

                        beforeend——将片段作为当前元素的最后一个子元素插入；

insertBefore(<newElem>,<childElem>)——在第二个（子）元素之前插入第一个元素；

isEqualNode(<HTMLElement>)——判断指定元素是否与当前元素相同；

isSameNode（<HTMLElement>）——判断指定元素是否就是当前元素；

用document对象创建元素：

createElement(<tag>)——创建一个属于指定标签类型的新HTMLElement对象；

createTextNode(<text>)——创建一个带有指定内容的新Text对象；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <style>
        p{
            border: medium double black;
            clear:left;
        }
        pre{
            border:thin solid green;
        }
        p.newclass{
            background-color: grey;
            color: white;
        }
        table{
            border:thin solid black;
            border-collapse: collapse;
            margin: 10px;
            float: left;
        }
        td{
            padding: 4px 5px;
        }
    </style>
</head>
<body>
    <p id="textblock" dir="ltr" lang="zh-CN" class="yuandi numbers" data-fruit="apple" data-sentiment="like">
        远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
        远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，<b>为资金富裕方和资金需求方打造一个专业</b>，诚信，共赢，睿智的服务平台，
        帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
    </p>
    <pre id="results"></pre>
    <button id="pressme">点击改变样式</button>
    <pre id="results2"></pre>
    <button id="toggle">切换样式</button>
    <pre id="results3"></pre>
    <pre id="results4"></pre>
    <pre id="results5"></pre>
    <button id="pressme1">点击获取字符数量</button>
    <pre id="results6"></pre>
    <table border="1">
        <thead>
            <tr>
                <th>Name</th><th>Color</th>
            </tr>
        </thead>
        <tbody id="fruitsBody">
            <tr>
                <td>Banana</td><td>Yellow</td>
            </tr>
            <tr id="apple">
                <td>Apple</td><td>Red</td>
            </tr>
        </tbody>
    </table>
    <table border="1">
        <thead>
            <tr>
                <th>Fruit</th><th>Color</th>
            </tr>
        </thead>
        <tbody id="fruitsBody3">
            <tr id="plumrow">
                <td>Plum</td><td>Purple</td>
            </tr>
        </tbody>
    </table>
    <pre id="results7"></pre>
    <button id="add">添加元素</button>
    <button id="remove">移除元素</button>
    <button id="move">移动元素</button>
    <table border="1">
        <thead>
        <tr>
            <th>Multiply</th><th>Results</th>
        </tr>
        </thead>
        <tbody id="fruitsBody2">
        <tr>
            <td class="sum">1*1</td><td class="result">1</td>
        </tr>
        </tbody>
    </table>
    <button id="copy">复制元素</button>
    <table border="1">
        <thead>
        <tr>
            <th>Fruit</th><th>Color</th>
        </tr>
        </thead>
        <tbody>
        <tr id="applerow">
            <td>Plum</td><td>Purple</td>
        </tr>
        </tbody>
    </table>
    <textarea rows="3" id="results8"></textarea>
    <p>
        <button id="inner">Inner HTML</button>
        <button id="outer">Outer HTML</button>
    </p>
    <table border="1">
        <thead>
        <tr>
            <th>Fruit</th><th>Color</th>
        </tr>
        </thead>
        <tbody id="fruitsBody4">
        <tr id="targetrow">
            <td>placeHolder</td>
        </tr>
        </tbody>
    </table>
    <p id="buttons">
        <button id="ab">After Begin</button>
        <button id="ae">After End</button>
        <button id="bb">Before Begin</button>
        <button id="be">Before End</button>
    </p>
    <p>
        <button id="insert">插入元素</button>
    </p>
    <script>
        var results=document.getElementById("results");
        var elem=document.getElementById("textblock");
        //使用基本元数据属性
        results.innerHTML+="tag:"+elem.tagName+"\n";
        results.innerHTML+="id:"+elem.id+"\n";
        results.innerHTML+="dir:"+elem.dir+"\n";
        results.innerHTML+="lang:"+elem.lang+"\n";
        results.innerHTML+="hidden:"+elem.hidden+"\n";
        results.innerHTML+="disabled:"+elem.disabled+"\n";
        //使用className属性
        document.getElementById("pressme").οnclick=function(e){
            elem.className+=" newclass";
        }
        //使用classList属性
        var results2=document.getElementById("results2");
        document.getElementById("toggle").οnclick=toggleClass;
        listClasses();
        function listClasses(){
            var classlist=elem.classList;
            results2.innerHTML="Current classes: "
            for(var i=0;i<classlist.length;i++){
                results2.innerHTML+=classlist[i]+" ";
            }
        }
        function toggleClass(){
            elem.classList.toggle("newclass");
            listClasses();
        }
        //使用属性方法
        var results3=document.getElementById("results3");
        results3.innerHTML="元素是否有lang属性："+elem.hasAttribute("lang")+"\n";
        results3.innerHTML+="lang属性值是："+elem.getAttribute("lang")+"\n";
        results3.innerHTML+="设置lang属性\n";
        elem.setAttribute("lang","en-US");
        results3.innerHTML+="lang属性值是："+elem.getAttribute("lang")+"\n";
        //使用dataset属性
        var results4=document.getElementById("results4");
        for(var attr in elem.dataset){
            results4.innerHTML+=attr+"\n";
        }
        results4.innerHTML+="data-fruit的属性值是："+elem.dataset["fruit"];
        //使用所有属性
        var results5=document.getElementById("results5");
        var attrs=elem.attributes;
        for(var i=0;i<attrs.length;i++){
            results5.innerHTML+="Name:"+attrs[i].name+" value:"+attrs[i].value+"\n";
        }
        attrs["data-fruit"].value="banana";
        results5.innerHTML+="data-fruit的属性值是："+attrs["data-fruit"].value;
        //处理文本
        var results6=document.getElementById("results6");
        document.getElementById("pressme1").οnclick=function(){
            var textElem=elem.firstChild;
            results6.innerHTML="这个p元素含有"+textElem.length+"chars\n";
            textElem.replaceWholeText("这是一个新字符串");
        }
        //创建和删除元素
        var tableBody=document.getElementById("fruitsBody");
        document.getElementById("add").οnclick=function(){
            var row=tableBody.appendChild(document.createElement("tr"));
            row.setAttribute("id","newrow");
            row.appendChild(document.createElement("td")).appendChild(document.createTextNode("Plum"));
            row.appendChild(document.createElement("td")).appendChild(document.createTextNode("Purple"));
        }
        document.getElementById("remove").οnclick=function(){
            var row=document.getElementById("newrow");
            row.parentNode.removeChild(row);
        }
        //复制元素
        var tableBody2=document.getElementById("fruitsBody2");
        document.getElementById("copy").οnclick=function(){
            var count=tableBody2.getElementsByTagName("tr").length+1;
            var newElem=tableBody2.getElementsByTagName("tr")[0].cloneNode(true);
            newElem.getElementsByClassName("sum")[0].firstChild.data=count+"*"+count;
            newElem.getElementsByClassName("result")[0].firstChild.data=count*count;
            tableBody2.appendChild(newElem);
        }
        //移动元素
        document.getElementById("move").οnclick=function(){
            var appleElem=document.getElementById("apple");
            document.getElementById("fruitsBody3").appendChild(appleElem);
        }
        //比较元素对象
        var elemByID=document.getElementById("plumrow");
        var elemByPos=document.getElementById("fruitsBody3").getElementsByTagName("tr")[0];
        if(elemByID.isSameNode(elemByPos)){//firefox不支持
            document.getElementById("results7").innerHTML="元素是同一个";
        }
        //使用innerhtml和outerhtml
        var results8=document.getElementById("results8");
        var applerow=document.getElementById("applerow");
        document.getElementById("inner").οnclick=function(){
            results8.innerHTML=applerow.innerHTML;
        }
        document.getElementById("outer").οnclick=function(){
            results8.innerHTML=applerow.outerHTML;
        }
        //插入html片段
        var target=document.getElementById("targetrow");
        var buttons=document.getElementById("buttons").getElementsByTagName("button");
        for(var i=0;i<buttons.length;i++){
            buttons[i].οnclick=handleButtonPress;
        }
        function handleButtonPress(e){
            if(e.target.id=="ab"){//firefox不支持
                target.insertAdjacentHTML("afterbegin","<td>After Begin</td>");
            }else if(e.target.id=="be"){
                target.insertAdjacentHTML("beforeend","<td>Before End</td>");
            }else if(e.target.id="bb"){
                target.insertAdjacentHTML("beforebegin","<tr><td colspan='2'>Before Begin</td>");
            }else{
                target.insertAdjacentHTML("afterend","<tr><td colspan='2'>After End</td>");
            }
        }
        //将一个元素插入文本块
        document.getElementById("insert").οnclick=function(){
            elem.firstChild.splitText(10);
            var newText=elem.childNodes[1].splitText(8).previousSibling;
            elem.insertBefore(document.createElement("b"),newText).appendChild(newText);
        }
    </script>
</body>
</html>




bboyjoe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript HTML DOM元素 节点操作汇总
12-29
前言 在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ： 1. nodeName : 节点的名称 2. nodeValue ：节点的值 3. nodeType ：节点的类型 节点类型：元素 1 ，属性 2 ，文本 3 ，注释 8，文档 9。 一、添加和删除节点（HTML 元素） 1、创建节点 1）创建该元素（元素节点）； 2）向一个已存在的元素追加该元素。 语法：appendChild(newnode) eg: <div id=div1> <p id=p1>这是一个段落</p> <p id=p2>这是另一个段落</p> </div>
JavaScript操作DOM元素的childNodes和children区别
10-24
在JavaScript编程中，操作DOM（文档对象模型）是非常常见的任务，因为几乎所有的前端开发都需要通过DOM来与页面上的元素进行交互。DOM提供了丰富的API供我们操作网页上的各个元素。本文将重点讲解两个属性——...
JavaScript操作DOM元素
穆雄雄的博客
06-18 452
一、DOM： Document Object Model（文档对象模型） 二、DOM的分类： 1.DOM Core（核心） 2.HTML-DOM 3.CSS-DOM 三、节点属性： 1.lastElementChild:最后一个节点 2.firstElementChild:第一个节点 3.nextElementSibling：下一个节点 4.previousElementSibling：上一个节点...
JavaScript操作元素
helongzhi的博客
06-22 566
JavaScript操作元素
JavaScript 操作HTML DOM元素
僵小蛋的博客
08-09 468
DOM概念 DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 可以通过浏览器的开发者工具进行观察DOM。 可以看出，整个文档是由一系列节点对象所组成的一棵树，节点（Node）包括元素节点（1表示）、属性节点（2表示）和文本节点（3表示）。 以下例子均以此表格为例说明：
JavaScript中DOM元素对象
weixin_52629158的博客
05-02 621
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。一个窗口下面可以有很多的document对象。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。document 表示的是一个文档对象，windows 表示一个窗口对象。insertBefore() 方法可在已有的子节点前插入一个新的子节点。childNodes 属性返回包含被选节点的子节点的 NodeList。
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript dom操作 删除元素 示例代码
最新发布
06-27
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
JS：操作DOM元素（增、删、改、查）
weixin_48475463的博客
02-03 2655
一、增 1. 创建一个节点 createElement、createTextNode <body> <div> <p> <span>李沁，我喜欢你！</span> </p> </div> <script> var div = document.querySelector('div'); var
JavaScript DOM 元素 (节点)
松柏手记
04-02 149
JavaScript HTML DOM 元素 (节点)
JavaScript 操作元素属性
weixin_34221332的博客
01-03 302
1.获取元素方法之一 可以使用内置对象document上的getElementByld方法来获取页面上设置了id属性的元素，获取到的是一个HTML对象，然后将它赋值给一个变量 <div id="div1">hahahah</div><script type="text/javascript"> var odiv = document.getElementBy...
javascript如何操作页面元素
weilaaer的博客
12-21 1240
要操作页面元素首先要获取页面内元素，获取到元素后，我们就可以对元素进行各种各样的操作，例如改变元素的文字，修改元素的内置属性等等。
JavaScript 操作元素案例
qq_52476758的博客
12-11 581
操作元素案例 1. 点击按钮，显示当前时间 <body> <button>显示当前系统时间</button> <div>某个时间</div> <script> // element.innerText() var btn=document.querySelector("button"); var div=document.querySelector("div");
【前端】JavaScript-操作元素
qq_45764950的博客
11-09 1041
所有元素全部清除样式给当前元素设置样式element.属性 //获取属性值（元素本身自带的属性）element.getAttribute('属性') //主要获取自定义的属性（标准）程序员自定义的属性element.属性='值' //设置内置属性值element.set Attribute('属性','值') //主要针对自定义属性自定义属性的目的：是为了保存和使用数据，有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取通过element.getAttribute('属性')
JavaScript操作元素的基础语法
abraham_ly的博客
11-22 180
JavaScript操作元素的基础语法 目录：JavaScript操作元素的基础语法1、介绍2、获取/改变元素里的内容2.1 获取/改变文本框的内容2.2 获取/改变其他元素的文本内容1、innerText获取文本内容修改文本内容2、innerHTML获取文本内容修改文本内容3、区别3、常见元素属性操作3.1 语法格式3.2 属性及其操作4、表单元素的属性操作5、操作样式5.1 通过stye对象修改css样式5.1.1 案例15.1.2 案例25.2 通过className修改css样式5.2.1 案例
javaScript 简单操作页面元素的方法
weixin_46772652的博客
07-10 2358
1 JavaScript组成三个部分 - 1.ECMAScript - JavaScript的核心 定义了javascript的语法规范 JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准 - 2.DOM - 文档对象模型 一套操作页面元素的API DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作 - 3.BOM - 浏览器对象模型 一套操作浏览器功能的API 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览
详解javascript里面的DOM操作
hitpter的专栏
08-09 361
DOM(Document Object Model)是用于操作HTML和XML文档的标准编程接口。在JavaScript中，我们可以使用DOM来选择元素、修改元素属性、添加/删除元素以及处理事件等操作。本文将详细介绍如何使用JavaScript来操作DOM，并提供一些练习的例子和答案。
JS获取DOM元素的方法
热门推荐
万伏小太阳
01-25 2万+
什么是HTML DOM 文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。 这篇文章不做深入研究，只把各种用法和坑做一个总结。 JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElem
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值