学习JavaScript笔记9

最新推荐文章于 2024-07-29 17:08:18 发布

daomittt

最新推荐文章于 2024-07-29 17:08:18 发布

阅读量146

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/daomittt/article/details/82024878

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

认识DOM

（Document Object Model）文档对象模型
1、定义访问和处理HTML文档的标准方法。
2、将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

节点：

元素节点：<html>、<body>、<p>等都是元素节点，即标签。
文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
属性节点:元素属性，如标签的链接属性href=”https://blog.csdn.net/daomittt/article/details/81879929”。

节点属性

方法	说明
nodeName	返回一个字符串，内容是给定节点的名字
nodeType	返回一个整数，这个数值代表给定节点的类型
nodeValue	返回给定节点的当前值

遍历节点树

方法	说明
childNodes	返回一个数组，这个数组由给定元素节点的子节点构成
firstChild	返回一个子节点
lastChild	返回最后一个子节点
parentNode	返回一个给定节点的父节点
nextSibling	返回给定节点的下一个子节点
previousSibling	返回给定节点的上一个字节点

DOM操作

方法	说明
createElement（element）	创建一个新的元素节点
createTextNode（）	创建一个包含着给定文本的新文本节点
appendChild（）	指定节点的最后一个子节点列表之后添加一个新的子节点
insertBefore	将一给定节点插入到一个给定元素节点的给定子节点的前面
removeChild（）	从一个给定元素中删除一个子节点
replaceChild（）	把一个给定父元素里的一个子节点替换为另外一个节点

注意：前两个是document方法

getElementsByName()方法

返回带有指定名称的节点对象的集合。

document.getElementsByName(name)
//通过元素的name属性查询元素

*getElementById() 方法通过id属性查询元素。

注意：

1、因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2、和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

document.getElementsByTagName(Tagname);

注意：

1、 Tagname是标签的名称，如p、a、img等标签名。
2、和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
getElementByID,getElementsByName,getElementsByTagName的区别
ID是唯一的，Name可以重复，而TagName则为一类
exam：

<input type="checkbox" name="hobby" id="hobby1">  音乐
//input标签就像类别，属于TagName

getAttribute()方法

通过元素节点的属性名称获取属性的值。

elementNode.getAttribute(name)

说明:

1、elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2.、name：要想查询的元素节点的属性名字

setAttribute()方法

增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

elementNode.setAttribute(name,value)
//name: 要设置的属性名。

//value: 要设置的属性值。

注意：

1、把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

2、类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性

一、nodeName 属性: 节点的名称，是只读的。

1、元素节点的 nodeName 与标签名相同
2、属性节点的 nodeName 是属性的名称
3、文本节点的 nodeName 永远是 #text
4、文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

1、元素节点的 nodeValue 是 undefined 或 null
2、.文本节点的 nodeValue 是文本自身
3、属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

elementNode.childNodes

注意：

1、如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
2、由于 IE全系列、firefox、chrome、opera、safari兼容问题，节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，IE不是。

<ul> 空白节点
<li>javascript</li> 空白节点
<li>jQuery</li>  空白节点
<li>PHP</li>  空白节点
</ul> 
//exam：IE是3，其它浏览器是7
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
//运行结果:（IE和其它浏览器结果都是3）
//UL子节点个数:3 节点类型:1

访问子节点的第一和最后项

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

node.firstChild

//与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

node.lastChild
//与elementNode.childNodes[elementNode.childNodes.length-1]
//是同样的效果。

注意: Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。可以通过检测节点类型，过滤子节点。

访问父节点parentNode

获取指定节点的父节点

elementNode.parentNode

注意:父节点只能有一个。

exam：

<div id="text">
  <p id="con"> parentNode 获取指定节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>
//运行结果：parentNode 获取指点节点的父节点
//DIV

访问祖节点（父节点的父节点）:

elementNode.parentNode.parentNode

可依此类推跳出几级访问上级节点。
注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

访问兄弟节点

1、nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

nodeObject.nextSibling

//如果无此节点，则该属性返回 null。

2、 previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

nodeObject.previousSibling  
//如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

appendChild(newnode)
//newnode：指定追加的节点。

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

insertBefore(newnode,node);
//newnode: 要插入的新节点。
//node: 指定此节点前插入节点。

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

nodeObject.removeChild(node)
//node ：必需，指定需要删除的节点。

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null 值
exam：

var x =nodeObject.removeChild(node);
x = null;

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

node.replaceChild (newnode,oldnew )
// newnode : 必需，用于替换 oldnew 的对象。 
//oldnew : 必需，被 newnode 替换的对象。

注意:

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
newnode 必须先被建立。

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

document.createElement(tagName)
//tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

exam(创建一个按钮)：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   body.appendChild(input);  
 </script>

用setAttribute来创建文本框，设置属性，exam：

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>

创建文本节点createTextNode

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

document.createTextNode(data)
//data : 字符串值，可规定此节点的文本。

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度

• window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的标签

• document.body.clientHeight

• document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意：

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

offsetHeight = clientHeight + 滚动条 + 边框。览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

网页卷去的距离与偏移量

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

注意:
offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <script type="text/css">
        .message{
            width:200px;
            height:100px;
            background-color:#CCC;}

    </script>
</head>
<body>
<h2 id="con">认识DOM</h2>
<div id="co"><p id="shiyan">JavaScript使网页显示动态效果并实现与用户交互功能</p></div>
<script type="text/javascript">
    var t1 =document.getElementById("con");
    t1.style.color="red";
    t1.style.backgroundColor="#CCC";
   t1.style.display="none";//隐藏
    function getnum() {
        var tt = document.getElementsByName("myt");//通过name获取元素
        alert(tt.length);
    }
    function getli() {
        var list =document.getElementsByTagName('input');//通过tagname获取元素
        input = list[0];//访问无序列表，【0】索引
        document.write(list.length);//得出节点对象的长度
    }

    function checkall(){
        var hobby = document.getElementsByName("hobby");
        for(var i=0;i<hobby.length;i++)    //遍历整个"hobby"数组;
        {
            hobby[i].checked=true;
            //对数组的每一个元素添加一个"true";就是checked为选中状态
        }}
        // 任务1
    function clearall(){
        var hobby = document.getElementsByName("hobby");
        for(var i=0;i<hobby.length;i++)    //遍历整个"hobby"数组;
        {
            hobby[i].checked=false;
            //对数组的每一个元素添加一个"false";就是checked为不选中状态
        }}
        // 任务2
    function checkone(){
        var j=document.getElementById("wb").value;
        var hobby = document.getElementsByName("hobby");
        for(var i=0;i<hobby.length;i++){
            if(i==(j-1)){
      //  document.getElementById("hobby"+j).checked=true;
                hobby[i].checked=true;}
                else{hobby[i].checked=false;}
        }
    }
        var con=document.getElementsByTagName("li");
        for (var i=0; i< con.length;i++){
           var text = con.getAttribute("title");
            if(text!=null)
            {
                document.write(text+"<br>");}
        }

    function req(){
        var div = document.getElementById("div1");
        document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
        document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
        document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
        document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
    }

</script>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<br />
<input type="button" onclick="getli()"
       value="看看标签名为input的节点有几个?" />

<input type="button" onclick="getnum()" value="看看有几项？" />
<form>
    请选择你爱好:<br>
    <input type="checkbox" name="hobby" id="hobby1">  音乐
    <input type="checkbox" name="hobby" id="hobby2">  登山
    <input type="checkbox" name="hobby" id="hobby3">  游泳
    <input type="checkbox" name="hobby" id="hobby4">  阅读
    <input type="checkbox" name="hobby" id="hobby5">  打球
    <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
    <input type="button" value = "全选" onclick = "checkall();">
    <input type="button" value = "全不选" onclick = "clearall();">
    <p>请输入您要选择爱好的序号，序号为1-6:</p>
    <input id="wb" name="wb" type="text" >
    <input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<p id="intro">课程列表</p>
<ul>
    <li title="JS">JavaScript</li>
    <li title="JQ">JQuery</li>
    <li title="">HTML/CSS</li>
    <li title="JAVA">JAVA</li>
    <li title="">PHP</li>
</ul>

<ul id="father">
    <li id="lesson1">javascript
        <ul>
            <li id="son"> 基础语法</li>
            <li>流程控制语句</li>
            <li>函数</li>
            <li>事件</li>
            <li>DOM</li>
        </ul>
    </li>
    <li id="lesson2">das</li>
    <li id="lesson3">dadf</li>
    <li id="lesson4">HTML/CSS
        <ul id="charu">
            <li>文字</li>
            <li>段落</li>
            <li>表单</li>
            <li>表格</li>
        </ul>
    </li></ul>

<div id="com">
    javascript
    <p>javascript</p>
    <div>jQuery</div>
    <h5>PHP</h5>
</div>
<h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
    var Lists=document.getElementsByTagName("li");
    for (var i=0; i<Lists.length;i++)
    {
        var text = Lists[i].getAttribute("title");
        document.write(text +"<br>");
        if(text=="")
        {
            Lists[i].setAttribute("title","WEB前端技术");
            document.write(Lists[i].getAttribute("title")+"<br>");
        }
    }
    var tt = document.getElementsByTagName("li");
    for(var i=0;i<tt.length;i++){
    document.write(tt[i].nodeName+"...");
    document.write(tt[i].nodeValue+"...");
    document.write(tt[i].nodeType+"<br>");}

    var x =document.getElementsByTagName("div")[0].childNodes;
    for(var i=0;i<x.length;i++){
    document.write("第"+(i+1)+"节点类型:"+x[i].nodeType+"...");
    document.write("第"+(i+1)+"节点的值:"+x[i].nodeValue+"...");
    document.write("第"+(i+1)+"节点名称"+x[i].nodeName+"<br>");

        var x=document.getElementById("com");
        document.write("第一个："+x.firstChild.nodeValue+"<br>");
        document.write("最后一个："+x.lastChild.nodeName+"<br") ;
    }

    var mylist = document.getElementById("son");
    document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);

    function get_nextSibling(n){
        var x=n.nextSibling;
        while(x.nodeType!=1){
            x=x.nextSibling;
        }
        return x;
    }

    var x=document.getElementsByTagName("li")[0];
    document.write(x.nodeName);
    document.write(" = ");
    document.write(x.innerHTML);
    var y=get_nextSibling(x);
    if(y!=null){
        document.write("<br />nextsibling: ");
        document.write(y.nodeName);
        document.write(" = ");
        document.write(y.innerHTML);
    }else{
        document.write("<br>已经是最后面一个节点");
    }


    var otest = document.getElementById("charu");
    var newnod = document.createElement("li");
    newnod.innerHTML="单词";
    otest.appendChild(newnod);

    function clearText() {
        var content=document.getElementById("father");
        // 在此完成该函数
        for(var i=0;i<content.length;i++){
            var x = content.childNodes[i];
            content.removeChild(x);
        }
    }

    function replaceMessage(){
        var oldnode = document.getElementById("shiyan");
        var oldHTML = oldnode.innerHTML;
        var newnode=document.createElement("i");
        oldnode.parentNode.replaceChild(newnode,oldnode);
        newnode.innerHTML=oldHTML;
    }//标签换成i

    var otest1 = document.getElementById("co");
    var node = document.getElementById("shiyan");
    var newnode =document.createElement("p");
    newnode.innerHTML="试图在前面插入";
    otest1.insertBefore(newnode,node);

    var body= document.body;
    //创建链接
    function createa(url,text)
    {
        var a = document.createElement("a");
        a.href = url;
        a.innerHTML = text;
        a.style.color ="red";
        body.appendChild(a);
    }
    // 调用函数创建链接
    createa("https://blog.csdn.net/daomittt/article/details/81879929","博客8");

    var ele = document.createElement("p");
    ele.className = "message";
    var textn = document.createTextNode("I love JavaScript!");
    ele.appendChild(textn);
    document.body.appendChild(ele);

    var w = document.documentElement.clientWidth
        || document.body.clientWidth;
    var h = document.documentElement.clientHeight
        || document.body.clientHeight;
</script>

<p style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
<div style="width:60%;border-right:1px dashed red;float:left;">
    <div style="float:left;">
        <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
            <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
        </div>
        <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
    </div>

</div>
<div style="width:30%;float:left;">
    <ul style="list-style-type: none; line-height:30px;">结果：
        <li>offsetTop : <span id="li1"></span></li>
        <li>offsetLeft : <span id="li2"></span></li>
        <li> scrollTop : <span id="li3"></span></li>
        <li>scrollLeft : <span id="li4"></span></li>
    </ul>

</div>
<div style="clear:both;"></div>
</p>
</body>
</html>