JS 07 Dom

2019-05-08 07:26:07来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

DOM(Document Object Model):
结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。
结点类型
1.元素结点
2.属性结点
3.文本结点
 
结点的注意点:
1.文本节点和属性结点都看作元素结点的子结点
2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用“结点”称呼它
3.结点的关系有:父子关系、兄弟关系
 
1.获取元素结点
1)直接获取
① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()
2)间接获取
父子关系
firstChild lastChild childNodes
子父关系
parentNode
兄弟关系
nextSibling previousSibling
2.操作属性结点
1)通过对象“.”属性,来操作属性
优:可以动态获取用户修改的属性值
缺:不能获取自定义属性的值
2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
优:可以获取自定义属性的值
缺:不能动态获取用户修改的属性值
3.处理文本结点
1) 通过对象.innerText 获取标签内部的文本信息
2) 通过对象.innerHTML 获取标签内部的HTML代码
 
 
 
4.动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)
3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)
4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)
5)(父结点)删除旧子结点对象
fahterNode.removeChild(旧结点对象)
 
5.动态改变元素的CSS样式(不重要)
1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称
2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)
<script type="application/javascript">
       //1.获取元素结点
       //1)直接获取
//        ① document.getElementById()
        function getEle1(){
            var obj=document.getElementById("userid")
            console.log(obj)
        }
//        ② document.getElementsByName()
        function getEle2() {
            // 获取的是一个数组
            var obj = document.getElementsByName("fav");
            console.log(obj)
        }
//        ③ document.getElementsByTagName()
        function getEle3(){
            var obj = document.getElementsByTagName("input");
            console.log(obj);
        }


        function getEle4(){
            var father = document.getElementById("regForm");
            var sons = father.childNodes;
//                获取指定位置
            console.log(sons[1]);
//              firstChild   获取第一个
            console.log(father.firstChild);
//             lastChild   获取最后一个
            console.log(father.lastChild);
        }

//      子父关系  parentNode
        function getEle5(){
            var son = document.getElementById("userid");
            console.log(son.parentNode)
        }
//       兄弟关系 nextSibling 下一个对象  
//previousSibling当前结点的前一个结点返回紧邻当前元素之前的元素
        function getEle6(){
            var bro = document.getElementById("userid");
            console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
            bro.previousSibling

        }

        function getField1(){
            var obj = document.getElementById("nickid");
            //console.log(obj.type);
            //将昵称的样式改为password
            //obj.type = "password"; 

            var objval = obj.getAttribute("name");
            console.log(objval);
            obj.setAttribute("abcd","5678");
            obj.removeAttribute("type");

//            可以获取改变后的属性
            console.log(obj.value)
//            只能获取初始定义的属性
            console.log(obj.getAttribute("value"));
        }

        //        1) 通过对象.innerText 获取标签内部的文本信息
        function getText1(){
            var myDiv = document.getElementById("myDiv");
            console.log(myDiv.innerText);
        }
//        2) 通过对象.innerHTML 获取标签内部的HTML代码
        function getText2(){
            var myDiv = document.getElementById("myDiv");
            console.log(myDiv.innerHTML);
        }

//        添加文本
        function getText3(){
            var myDiv = document.getElementById("myDiv");
            myDiv.innerText = "<img src='1.jpg' />";
        }
//        添加代码
        function getText4(){
            var myDiv = document.getElementById("myDiv");
            myDiv.innerHTML = "<img src='1.jpg' />";
        }




    </script>
</head>
<body>

<button onclick="getEle1();">点我测试1</button>
<button onclick="getEle2();">点我测试2</button>
<button onclick="getEle3();">点我测试3</button>
<button onclick="getEle4();">点我测试4</button>
<button onclick="getEle5();">点我测试5</button>
<button onclick="getEle6();">点我测试6</button>
<hr/>

<button onclick="getField1();">属性测试1</button>
<hr/>
<button onclick="getText1();">文本测试1</button>
<button onclick="getText2();">文本测试2</button>
<button onclick="getText3();">文本测试3</button>
<button onclick="getText4();">文本测试4</button>

<hr/>
<form id="regForm">
    用户名:<input id="userid" type="text" name="username"><br/>
    密码:<input type="password" name="password"><br/>
    昵称:<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
    性别:男<input type="radio" name="gender" value="nan">&nbsp;&nbsp;
    女<input type="radio" name="gender" value="nv"><br/>
    爱好:狗<input type="checkbox" name="fav" value="dog"><input type="checkbox" name="fav" value="cat">
    羊驼<input type="checkbox" name="fav" value="yt"><br/>
    <input type="submit" value="注册">
</form>
<div id="myDiv"><b>hello</b></div>
</body>

 

4.动态改变DOM结构
1)创建一个结点对象
document.createElement("标签名")
<script type="application/javascript">
    function changeDom1(){
        var ipt=document.createElement("input");
    }
</script>
<button onclick="changeDom1();">创建结点对象</button>

 

2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)
function changeDom2() {
    var father = document.getElementById("regForm");

    var ipt = document.createElement("input");
    ipt.type = "text";

    father.appendChild(ipt);
}
<button onclick="changeDom2();">追加子结点对象</button>

 

3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)
function changeDom3() {
    var father = document.getElementById("regForm");
    var refChild = document.getElementById("brid");
    var newChild = document.createElement("input");
    newChild.type = "text";
    father.insertBefore(newChild, refChild);
}
<button onclick="changeDom3();">插入子结点对象</button>

 

4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)
function changeDom4() {
    var father = document.getElementById("regForm");
    var refChild = document.getElementById("brid");
    var newChild = document.createElement("input");
    newChild.type = "text";
    father.replaceChild(newChild, refChild);
}
<button onclick="changeDom4();">替换子结点对象</button>

 

5)(父结点)删除旧子结点对象
function changeDom5() {
            var father = document.getElementById("regForm");
            var refChild = document.getElementById("nickid");
            father.removeChild(refChild);
        }
<button onclick="changeDom5();">删除子结点对象</button>

 

5.动态改变元素的CSS样式(不重要)
<style type="text/css">
        .addstyle{
            color: red;
            font-size: 72px;
            text-decoration: underline;
        }
    </style>
    <script type="application/javascript">

        /*
         5.动态改变元素的css样式
         1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称
         2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)
         */
        function fontGreater(){
            var myDiv = document.getElementById("myDiv");
            console.log(myDiv);
            myDiv.style.fontSize = "36px";
            myDiv.style.fontFamily = "宋体";
        }

        function changeFont(){
            var myDiv = document.getElementById("myDiv");
            myDiv.className = "addstyle";
            //myDiv.setAttribute("class","addstyle");
        }
    </script>
</head>
<body>
<button onclick="fontGreater()">放大字体</button>
<button onclick="changeFont()">添加样式</button>

<div id="myDiv" >你好世界!</div>
</body>
 

原文链接:https://www.cnblogs.com/aknife/p/10816853.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js 实现获取对象所有键名(key)的方法

下一篇:html,css,js(包含简单的 ES6语法) 实现 简单的音乐盒