JavaScript 的DOM对象

最新推荐文章于 2022-05-26 21:08:52 发布

Python小子

最新推荐文章于 2022-05-26 21:08:52 发布

阅读量349

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript DOM对象

本文链接：https://blog.csdn.net/weixin_43883022/article/details/89153803

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JavaScript 的DOM对象

1、DOM对象的概念

1、DOM：文档对象模型（Document Object Model）
2、document对象，是DOM中的顶级对象，封装了HTML的相关属性，方法和事件
- 在网页HTML的时候，会在内存中生成一颗DOM树，树根即为document，网页上的每个元素都是DOM树上的节点
3、DOM中所提供的操作
- a、查找节点的信息
- b、读取节点的信息
- c、修改节点的信息
- d、删除节点的信息
- e、创建节点的信息

2、查找节点

1、通过元素的id查找节点
- 语法：var elem = document.getElementById(“ID”);
  - ID：要获取的元素ID
  - elem：所得到的元素对象（DOM对象/DOM元素），没找到，则返回null

	<div id="d1">DIV元素</div>
    <button onclick="byId()">获取div元素</button>
    <script>
        function byId() {
            var elem = document.getElementById("d1");
            console.dir(elem);  //  获取elem对象的属性和事件
            console.log(elem.innerHTML);  // 获取elem对象的属性
            // 绑定事件
            elem.onclick = function () {
                alert("点击了div元素");
            }
        }
    </script>

2、通过标签名查找节点
- 语法：
  - document.getElementsByTagname(tagName)
  - elem.getElementsByTagname(tagName)
- 返回值：由指定标签元素所组成的数组

	<div id="libai">
        <h2>
            月下独酌·李白
        </h2>
        <p>花间一壶酒，独酌无相亲。</p>
        <p>举杯邀明月，对影成三人。</p>
    </div>
    <div id="dufu">
        <h2>
            江南逢李龟年·杜甫
        </h2>
        <p>岐王宅里寻常见，崔九堂前几度闻。</p>
        <p>正是江南好风景，落花时节又逢君。</p>
    </div>
    <p>
        <button onclick="tagFined()">通过标签名查询节点</button>
    </p>
    <script>
        function tagFined() {
            var tagDiv = document.getElementsByTagName("div");
            var tagP = document.getElementById("libai").getElementsByTagName("p");
            console.log(tagDiv);   // 返回网页中的全部 div 标签数组
            console.log(tagP);      // 返回指定 div 标签中的 全部 p 标签数组
        }
    </script>

3、通过元素的name值查找节点（优先使用在单选按钮和复选框中）
- 语法：document.getElementsByName(name)
- 返回值：由指定name值的元素所组成的数组

	<div id="score">
        <p>选择评分</p>
        <input type="radio" name="score" value="1">1星;
        <input type="radio" name="score" value="2">2星;
        <input type="radio" name="score" value="3">3星;
        <input type="radio" name="score" value="4">4星;
        <input type="radio" name="score" value="5">5星;
    </div>
    <button onclick="choiceScore()">提交评价</button>
    <script>
        function choiceScore() {
            var scores = document.getElementsByName("score");
            var ispass = false;
            var score = 0;
            for(var i = 0; i < scores.length; i++){
                if(scores[i].checked){
                    ispass = true;
                    score = scores[i].value;
                    break;
                }
            }
            if(ispass){
                alert(score+"星");
            }else {
                alert("请选择评分");
            }
        }
    </script>

4、通过元素的class值查找节点
- 语法：
  - document.getElementsByClassName(className)
  - elem.getElementsByClassName(className)
- 返回值：由指定className值的元素所组成的数组

	<div id="wangchangling">
        <h2 class="title" >出塞·王昌龄</h2>
        <p class="poem">秦时明月汉时关，万里长征人未还。</p>
        <p class="poem">但使龙城飞将在，不教胡马度阴山。</p>
    </div>
    <button onclick="changeTitle()">修改标题</button>
    <button onclick="changePoem()">修改诗句</button>
    <script>
        function changeTitle() {
            var titleArr = document.getElementById("wangchangling").getElementsByClassName("title");
            titleArr[0].style.color = "green";
        }
        function changePoem() {
            var poemArr = document.getElementById("wangchangling").getElementsByClassName("poem");
            for(var i = 0; i < poemArr.length; i++){
                poemArr[i].style.color = "red";
            }
        }
    </script>

5、通过节点层级关系查找节点

属性	说明
parentNode	返回当前元素的父节点
childNodes	返回当前元素的所有子节点（包含元素节点，文本节点，注释节点等）
children	返回当前元素的子节点（只包含元素节点）
nextSibling	返回当前元素的下一个兄弟节点（文本节点，注释节点或元素节点等）
nextElementSibling	返回当前元素的下一个元素兄弟节点（只返回元素节点）
previousSibling	返回当前元素的上一个兄弟节点（文本节点，注释节点或元素节点等）
previousElementSibling	返回当前元素的上一个元素兄弟节点（只返回元素节点）

	<div id="wangwei">
        <h2 id="title">红豆·王维</h2>
        <p>红豆生南国，春来发几枝。</p>
        <p>愿君多采撷，此物最相思。</p>
    </div>
    <button onclick="getParent()">获取父节点</button>
    <button onclick="getChild()">获取所有子节点</button>
    <button onclick="getChildren()">获取元素子节点</button>
    <button onclick="getNextBrother()">获取下一个兄弟节点</button>
    <button onclick="getNextElement()">获取下一个元素兄弟节点</button>
    <script>
        function getParent() {
            var pNode = document.getElementById("title").parentNode;
            console.log(pNode);
        }
        function getChild() {
            var cNodeArr = document.getElementById("wangwei").childNodes;
            console.log(cNodeArr);   // 7个子节点（包含元素节点，文本节点，注释节点等）
            for(var i = 0; i < cNodeArr.length; i++){
                if(cNodeArr[i].nodeType == 1){
                    console.log(cNodeArr[i]);   // 只取出元素节点
                }
            }
        }
        function getChildren() {
            var cNodeArr = document.getElementById("wangwei").children;
            console.log(cNodeArr);  // 3个节点
        }
        function getNextBrother() {
            var brotherNode = document.getElementById("title").nextSibling;
            console.log(brotherNode);  // text节点
        }
        function getNextElement() {
            var element = document.getElementById("title").nextElementSibling;
            console.log(element);
        }
    </script>

3、DOM对象的常用属性

1、innerHTML
- 作用：获取或设置当前DOM对象的HTML文本值
2、innerText
- 作用：获取或设置当前DOM对象的文本值

	<div id="d1"><h3>DIV元素</h3></div>
    <button onclick="byId()">修改DIV元素的值</button>
    <script>
        function byId() {
            var elem = document.getElementById("d1");
            console.log(elem.innerHTML);  // <h3>DIV元素</h3>，可获取全部HTML的信息 
            console.log(elem.innerText);  // DIV元素,只获取文本
            elem.innerHTML = "修改后的DIV";  
        } 
    </script>

3、value
- 作用：获取或设置表单控件的值

	<p>用户名：<input type="text" id="uname"></p>
    <p>密码：<input type="password" id="pwd"></p>
    <button onclick="getuname()">获取用户名</button>
    <button onclick="getpwd()">获取密码</button>
    function getuname() {
        var uname = document.getElementById("uname");
        console.log(uname.value);   // 获取表单的值
    }
    function getpwd() {
        var pwd = document.getElementById("pwd");
        console.log(pwd.value);    // 获取表单的值
    }

4、DOM对象读取节点信息

1、节点的类型（nodeType属性）

节点类型	说明	返回值
元素节点	表示页面上的一个元素	1
属性节点	表示页面上元素的一个属性	2
文本节点	表示页面上元素的一段文本内容	3
注释节点	表示页面上的一个注释	8
文档节点	表示HTML文档	9

2、节点的名称（nodeName属性）

节点类型	返回值
元素节点	元素名
属性节点	属性名
文本节点	#text
注释节点	#comment
文档节点	#document

	<div id="d1">DIV元素</div>
    <p>用户名：<input type="text" id="uname"></p>
    <button onclick="getNodeName()">获取元素名称</button>
    <script>
        function getNodeName() {
            var node_name_form = document.getElementById("uname");
            var node_name_div = document.getElementById("d1");
            console.log(node_name_form.nodeType);   // 1
            console.log(node_name_div.nodeName);    // DIV
        }
    </script>

5、DOM对象读取节点的属性信息

函数	说明	参数与返回值
getAttribute(attrName)	获取某个元素的属性值	attrName：要获取的属性名称；返回attrName对应的值或者null
setAttribute(attrName，attrValue)	修改某个元素的属性值	attrName：要修改的属性名称；attrValue：要设置的值
removeAttribute(attrName)	删除某个元素的属性值	attrName：要删除的属性名称

    <div>
        <p>
            用户名：<input type="text" id="uname">
            <button onclick="operateAttribute()">属性操作</button>
        </p>
    </div>
    <script>
        function operateAttribute() {
            var uname = document.getElementById("uname");
            var type_value = uname.getAttribute("type");  // text，获取type属性的值
            console.log(type_value);
            uname.setAttribute("type","password");  // 将文本框改为密码框
        }
    </script>

6、DOM对象设置元素的样式

1、使用setAttribute()设置class属性值
- 语法：elem.setAttribute(“class”,“类选择器”);
2、使用元素的 className 属性修改 class 值
- 语法：elem.className = “类选择器”;
3、自定义元素样式
- 语法：elem.style.css属性 = 值;
- 注意：如果css属性名中包含连字符的话，连字符（-）要省略，确连字符后面的第一个字母要大写

	<style>
        .red{color: red;}
        .green{color: green;}
    </style>
	<div id="d1">div中的文本</div>
    <button onclick="redColor()">变成红色</button>
    <button onclick="greenColor()">变成绿色</button>
    <button onclick="yellowColor()">变成黄色</button>
    <script>
        function redColor() {
            document.getElementById("d1").setAttribute("class","red");
        }
        function greenColor(){
        	document.getElementById("d1").className = "green";
        }
        
        // 内联方式修改样式
        function yellowColor() {
            document.getElementById("d1").style.color = "yellow";
            document.getElementById("d1").style.fontSize = "36px";  // font-size 属性
        }
    </script>

7、增加节点

1、创建节点
- 语法：var elem = document.createElement(“元素名称 ”);
- 返回值：elem，表示创建好的DOM元素
2、增加节点

语法	说明
documen.body.appendChild(elem)	向body中追加子元素
parentNode.appendChild(elem)	parentNode表示已经存在的一个元素，将elem追加到parentNode内部
parentNode.insertBefore(newElem，oldElem)	将newElem 元素插入到oldElem之前

	<button onclick="createNode()">创建节点</button>
    <script>
        function createNode() {
            var pNode = document.createElement("p");
            pNode.innerHTML = "这是p元素"
            document.body.appendChild(pNode);
        }
    </script>

8、删除节点

删除元素只能由父元素来发起

语法	说明
documen.body.removeChild(elem)	删除body中的elem元素
parentNode.removeChild(elem)	在parentNode元素中删除elem字元素

	<div id="wangwei">
        <h2>红豆·王维</h2>
        <p>红豆生南国，春来发几枝。</p>
        <p>愿君多采撷，此物最相思。</p>
    </div>
     <button onclick="delNode()">删除最后一行</button>
     <script>
        function delNode() {
            var parentNode = document.getElementById("wangwei");
            var lastLine = document.getElementById("wangwei").children[2];
            parentNode.removeChild(lastLine);
        }
    </script>