JavaScript——DOM对象的节点操作

其他 2018-08-19 13:12:07 阅读次数: 0

获取DOM对象

1.利用id：document.getElementById()

2.利用标签：document.getElementsByTagName();（一个标签名称可以有多个Element，所以这里返回的是集合）

3.利用class：document.getElementsByClassName();（多个元素可以有相同的class，所以这里返回的是集合）

4.利用表单名称：document.getElementsByName();(多个表单元素可以有相同的名称，所以这里返回的是集合)

4.利用childNodes属性：返回该节点的所有子节点（包括Text_Node,Comment_Node等所有Node,但不包括孙节点）

5.利用children属性：返回该节点的所有子元素（只有Element_Node，不包括其他Node，也不包括孙节点）

更多的方法可以参考DOM手册……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>获取DOM对象</h1>
    <div id="test1">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <div>
            <p>p4</p>
        </div>
        <!--注释，是一个COMMENT_NODE-->
    </div>
    <div class="test2"></div>
    <input type="text" name="test3" value="mike">
</body>
<script>
//    id
    var test1=document.getElementById("test1");
    console.log("test1:"+document.getElementById("test1"));

//    标签
    var ps=document.getElementsByTagName("p");
    console.log("ps:"+ps+"  p[3]:"+ps[3])

//    class
    var test2=document.getElementsByClassName("test2");
    console.log("test2:"+test2+"  test[0]:"+test2[0])

//    表单
    var test3=document.getElementsByName("test3");
    console.log("test3:"+test3+"  test3[0]"+test3[0])

    console.log(test1.childNodes)
    console.log(test1.children)
</script>
</html>

 运行结果：

 Element和Node的区别：

扫描二维码关注公众号，回复： 2855488 查看本文章

从上面例子可以看到test1.childNodes和test1.children返回的是不同的值。test1.childNodes返回的是Node集合，而test1.children返回的是Element集合，那么两者有何区别呢？

简单的说就是Node是一个基类，DOM中的Element，Text和Comment都继承于它。 
换句话说，Element，Text和Comment是三种特殊的Node，它们分别叫做ELEMENT_NODE, 
TEXT_NODE和COMMENT_NODE。

所以我们平时使用的html上的元素，即Element，是类型为ELEMENT_NODE的Node。

PS：NodeList和ElementCollcetion都不是数组 ，只是它们拥有一些数组的基本属性。

 

操作对象属性

如下这段代码：

<img id="test" title="world" style="width=300px;height=300px">
  • 普通属性可以通过"对象.标签属性"来访问，如"img对象.title";
  • css属性可以通过"对象.style.属性"来访问，如"img对象.style.height"。

当访问一个标签中并没有声明的属性时，会返回空字符串，如访问上面的"img对象.src"。但是你可以设置它，如"img对象.src='./hello.jps'"。

特殊情况：

  • 1.访问class属性时通过"对象.className" 而不是"对象.class"
<div class="test">
  • 2.css属性如果带有横线，则把横线去除变大写字母，如border-bottom-width，要变成boderBottomWidth

接下来是一个操作对象属性的小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: black;
        }
    </style>
</head>

<body>
<div  id="test" style="width: 300px;height:300px;background: red;border-bottom: 1px " onclick="t()">hello world</div>
</body>
<script>
function t() {
    var div=document.getElementById("test");
    if (div.style.background=="red"){

        div.style.background="green";
    }else {
        div.style.background="red";
    }
    //在style属性中声明的border-bottom是简写属性，它是把所有底部边框属性设置到一个声明中。
    //设置的属性按顺序为：border-bottom-width,border-bottom-style,border-bottom-color
    div.style.borderBottomWidth=parseInt(div.style.borderBottomWidth)+5+"px";
    console.log(div.style.borderBottomWidth)
    console.log(div.style.borderBottomStyle)
    console.log(div.style.borderBottomColor)

    console.log(div.style.color)//虽然<style>中已经声明过color属性，但是标签中没有声明style的color属性，所以返回的仍然是空字符串
    div.style.color="blue";//设置style的color属性
    
    console.log(div.className)//标签中没有声明className属性，返回空字符串
    div.className="test";
}
</script>
</html>

运行结果：

（1）未点击方块时

（2）第一次点击方块，color属性和className属性返回空字符串

（3）第二次点击方块，由于第一次点击时已经设置了color和className的属性，所以这里返回的并不是空字符串

获取运行时的style属性

在上面那个小例子中，我们用对象.style.color访问不了<style></style>的属性，只能访问标签里的的style属性。但我们可以用另外的两种方法访问style属性：

  • obj.currentStyle：IE和Opera支持，其他浏览器不支持
  • getComputedStyle(obj,伪元素):标准浏览器和IE9以上支持。第一个参数是要操作的对象，第二个参数是伪元素，如'hover'，'after'，一般设置为null。

考虑兼容性不报错，一般封装成：

function getStyle(el,attr) {
            return el.currentStyle?el.currentStyle[attr]:getComputedStyle(el,null)[attr];
        }

注意：这两个方法获取的对象是只读的，要想改变样式，还得依靠obj.style。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: black;
        }
    </style>
    <script>
        function getStyle(el,attr) {
            //为避免el.currentStyle是null带来的报错
            return el.currentStyle?el.currentStyle[attr]:getComputedStyle(el,null)[attr];
        }
        function t() {
            var div=document.getElementById("test");
            console.log(div.style.color);//获取不到

            var color=getStyle(div,'color');
            console.log(color);//获取到color值
            div.style.color="blue";

        }
    </script>
</head>

<body>
<div  id="test" style="width: 300px;height:300px;background: red;border-bottom: 1px " onclick="t()">hello world</div>
</body>

</html>

运行结果：

（1）点击方块前：

（2）第一次点击方块

（3）第二次点击方块

删除对象

步骤：1.找到对象

           2.找到对象的父对象   obj.parentNode

           3.父对象.removeChild(对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function del() {
            var lis=document.getElementsByTagName("li");
            var li=lis[lis.length-1];//1.找到对象
            var parent=li.parentNode;//2.找到父对象
            parent.removeChild(li);//3.用父对象removeChild(子对象)
        }
    </script>
</head>

<body>
<input type="button" value="删除最后一个li" onclick="del()">
<ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    <li>冬</li>
</ul>
</body>

</html>

创建节点

步骤：1.创建对象

           2.找到父对象

           3.父对象.appendChild(对象)

用到的方法：

  • element.appendChild()：向元素添加新的子节点，作为最后一个子节点
  • document.createElement()：创建元素节点
  • document.createTextNode()：创建文本节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function add() {
            var li=document.createElement("li");
            var txt=document.createTextNode("冬");
            var ul=document.getElementsByTagName("ul")[0];
            ul.appendChild(li);
            li.appendChild(txt);
        }
    </script>
</head>

<body>
<input type="button" value="增加一个li" onclick="add()">
<ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
</ul>
</body>

</html>

         

暴力操作节点——innerHtml       

innerHtml:代表节点内的内容能读能写。它不是w3c规定的标准对象属性，但是各浏览器支持的很好。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function add3() {
            var ul = document.getElementsByTagName("ul")[0];
            ul.innerHTML = "<li>春</li><li>夏</li><li>秋</li>";
        }
        function add1() {
            var ul=document.getElementsByTagName("ul")[0];
            ul.innerHTML+="<li>冬</li>";
        }
    </script>
</head>

<body>
<input type="button" value="增加春夏秋" onclick="add3()">
<input type="button" value="增加冬" onclick="add1()">
<ul>

</ul>
</body>

</html>

联动菜单

联动菜单触发事件是onchage()。

下面是一个二级联动的小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function ld() {
            var cities=[
                ["朝阳","海淀"],
                ["杭州","宁波","绍兴"]
            ]
            var opt="";
            var proSelect=document.getElementById("pro");
            var value=proSelect.value;
            var citySelect=document.getElementById("city");
            if(value==-1){
                citySelect.innerHTML=opt;
                return;
            }
            for(var i=0,length=cities[value].length;i<length;i++){
                opt+="<option value='"+i+"'>"+cities[value][i]+"</option>option>";
            }
            citySelect.innerHTML=opt;

        }
    </script>
</head>

<body>
    <select id="pro" onchange="ld()">
        <option value="-1">请选择</option>
        <option value="0">北京</option>
        <option value="1">浙江</option>
    </select>
    <select id="city">

    </select>
</body>

</html>

运行界面：

猜你喜欢

转载自blog.csdn.net/linghuainian/article/details/81604814
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022