P102. DOM增删改

  1. createElement()
    • 可以用于创建一个元素节点对象
    • 他需要一个标签名作为参数，将会根据改标签名创建元素节点对象，并将创建好的对象返回
    • 语法：document.createElement("元素标签");
  2. createTextNode()
    • 可以用来创建文本节点对象
    • 需要一个文本内容传参，将会根据该内容创建文本节点，并将新的节点返回
    • 语法：document.createTextNode("文本");
  3. appendChind()
    • 像一个父节点中创建一个新的子节点
    • 语法：父节点.appendChind(子节点);
  4. insertBefore()
    • 可以在指定子节点前插入新的子节点，如果没有指定旧节点，默认创建在父节点的末尾
    • 语法：父节点.insertBefore(新节点，旧节点);，可以简单看成在父节点上，把新节点放在旧节点前面。
  5. replaceChild()
    • 可以使用指定的子节点替换已有的子节点
    • 语法：父节点.replaceChild(新节点，旧节点);
  6. removeChild()
    • 删除指定的子节点
    • 语法：父节点.removeChild(子节点); ，不过父节点我们一般可以不用特意再去声明，可以直接使用：子节点.parentNode.removeChild(子节点);，上面的同理。

      此外，我们创建一个新的节点还可以使用innerHTML的方式，如：

  1. var city = document.querySelector("#city");
  2. city.innerHTML += "<li>广州</li>";    //利用+=进行字符串的拼接

不过这种添加方式有一个弊端，利用appendChild()创建的子节点只会影响该子节点，而这种方法创建的子节点，会影响其他兄弟节点，因为这是采用的字符串拼接的手段，在实际应用中我们应该两者结合使用，下面是优化方法：

  1. var city = document.querySelector("#city");
  2. var li = document.createElement("li");
  3. li.innerHTML = "广州";        // 这里添加广州的文本我们不采用document.createTextNode()的方法
  4. city.appendChild(li);

举个例子

下面的代码中，将会应用上面所讲到的函数。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 padding: 0;
  9.                 margin: 0;
  10.                 list-style: none;
  11.             }
  12.             #all{
  13.                 margin: 100px auto;
  14.                 width: 1000px;
  15.                 height: 500px;
  16.                 text-align: center;
  17.                 background-color: transparent;
  18.             }
  19.             #unor{
  20.                 background-color: rgb(185, 211, 233);
  21.                 width: 100%;
  22.                 display: flex;
  23.                 justify-content: center;
  24.             }
  25.             li{
  27.                 float: left;
  28.                 width: 100px;
  29.                 height: 100px;
  30.                 line-height: 100px;
  31.                 text-align: center;
  32.                 margin: 10px;
  33.                 background-color: aquamarine;
  34.             }
  35.             button{
  36.                 width: 200px;
  37.                 height: 50px;
  38.                 line-height: 50px;
  39.                 margin: 10px;
  40.             }
  41.         </style>
  43.         <script type="text/javascript">
  44.             window.onload = function(){
  45.                 // 创建一个“广州”节点
  46.                 Myclick("btn01",function(){            
  47.                     var li = document.createElement("li");    //创建广州节点
  49.                     var gztxt = document.createTextNode("广州");    //创建广州文本节点对象
  51.                     li.appendChild(gztxt);    //将gztxt设置为li的子节点
  53.                     var city = document.querySelector("#city");    //将广州添加到#city下
  54.                     city.appendChild(li)
  55.                 });
  57.                 // 将“广州”节点插入到#bj前面
  58.                 Myclick("btn02",function(){
  59.                     // 创建一个“广州”节点
  60.                     var li = document.createElement("li");
  61.                     var gztxt = document.createTextNode("广州");
  62.                     li.appendChild(gztxt);
  64.                     //获取#bj节点和#city节点
  65.                     var bj = document.querySelector("#bj");
  66.                     var city = document.querySelector("#city");
  68.                     city.insertBefore(li,bj);
  69.                 });
  71.                 // 使用“广州”节点替换#bj节点
  72.                 Myclick("btn03",function(){
  73.                     var li = document.createElement("li");
  74.                     var gztxt = document.createTextNode("广州");
  75.                     li.appendChild(gztxt);
  77.                     var city = document.querySelector("#city")
  78.                     var bj = document.querySelector("#bj");
  79.                     city.replaceChild(li,bj);
  80.                 });
  82.                 // 删除#bj节点
  83.                 Myclick("btn04",function(){
  84.                     var city = document.querySelector("#city");
  85.                     var bj = document.querySelector("#bj");
  86.                     //city.removeChild(bj);
  87.                     bj.parentNode.removeChild(bj);    //这种比上方的那个方法更方便好用
  88.                 });
  90.                 // 读取#bj中的html代码
  91.                 Myclick("btn05",function(){
  92.                     var city = document.querySelector("#city");
  93.                     alert(city.innerHTML);    //读取带标签的html代码
  94.                     alert(city.innerText);    //读取文本元素
  95.                 });
  97.                 // 设置#bj中的html代码
  98.                 Myclick("btn06",function(){ 
  99.                     var bj = document.querySelector("#bj");
  100.                     bj.innerText = "杭州";
  101.                 });
  103.                 // innerHTML创建一个“广州”节点
  104.                 Myclick("btn07",function(){
  105.                     var city = document.querySelector("#city");
  106.                     /* city.innerHTML += "<li>广州</li>"; */
  107.                     var li = document.createElement("li");
  108.                     li.innerHTML = "广州";
  109.                     city.appendChild(li);
  110.                 });
  112.             };
  114.       //将单击事件封装到一个函数中，也可以不封装
  115.             function Myclick(isStr,fun){
  116.                 var btn = document.getElementById(isStr);
  117.                 btn.onclick = fun;
  118.             }
  119.         </script>
  120.     </head>
  121.     <body>
  122.         <div id="all">
  123.             <div id="unor">
  124.                 <ul id="city">
  125.                     <li id="bj">北京</li>
  126.                     <li>厦门</li>
  127.                     <li>上海</li>
  128.                     <li>泉州</li>
  129.                     <li>成都</li>
  131.                 </ul>
  132.             </div>
  133.             <div id="btnList">
  134.                 <div><button id="btn01">创建一个“广州”节点</button></div>
  135.                 <div><button id="btn02">将“广州”节点插入到#bj前面</button></div>
  136.                 <div><button id="btn03">使用“广州”节点替换#bj节点</button></div>
  137.                 <div><button id="btn04">删除#bj节点</button></div>
  138.                 <div><button id="btn05">读取#bj中的html代码</button></div>
  139.                 <div><button id="btn06">设置#bj中的html代码</button></div>
  140.                 <div><button id="btn07">innerHTML创建一个“广州”节点</button></div>
  141.             </div>
  142.         </div>
  143.     </body>
  144. </html>

P103. DOM练习

点击超链接后会跳转到另一个页面，这是超链接的默认行为 如果希望点击一个超链接后不要跳转到新的页面，我们可以为此超链接绑定一个单击响应函数，最后return false来取消默认行为。

confirm()函数用于弹出一个带有确定和取消按钮的对话框，括号内填需要显示的内容，确定返回true，取消返回false

单击响应函数调用的方式不同，this指向的对象也不同:

  1. 如果单击响应函数的单击事件是在js中定义的，那么谁调用的，this就是谁，如：

    1. a.onclick = function(){
    2.  alert(this.innerHTML);
    3. }    //这里的this就是a这个元素节点本身，this.innerHTML就是获取它本身的文本

  2. 如果单击响应函数的单击事件是在HTML标签中定义的，那么this默认是window，我们可以把this作为参数传进去，如：

    1. <script type="text/javascript">
    2. function del(obj){        //定义一个obj来接受this
    3.      alert(obj.innerHEML);    //这时候obj就等于a这个元素节点
    4. }
    5. </script>
    6. ...
    7. <body>
    8. <a onclick="del(this)">删除</a>    //这里把this作为参数传到该函数中
    9. </body>

P107. DOM操作Css样式

通过JS修改元素的样式

  • 语法：元素.style.样式名 = "样式值"; //样式值要为字符串
  • 注意：如果修改的css样式中含有”-“，如：background-color。我们需要改用驼峰命名法，如：backgroundColor

  • 我们通过JS设置的样式属性都是行内样式的，所以一般情况下优先级最高，修改后的样式往往会立即显示 ，但是如果我们在css样式表中定义的样式包含了”!important”，则有可能出现意外，导致JS设置样式失效

    读取元素的样式

  • 语法：元素.style.样式名

  • 注意：由于我们修改元素的样式只能修改到行内样式中，所以我们读取元素样式的时候也只能读取行内样式！

    获取元素当前显示的样式

    方法一：

    ！！！注意：此方法仅IE支持，其他浏览器不支持

  • 语法：元素.currentStyle.样式名

  • 这个方法就可以显示css样式表中的样式了，因为这是当前显示什么就返回什么值，如果属性值在样式表中未定义，则返回默认值，如宽度默认auto，背景默认透明

方法二：

！！！注意：此方法IE8及以下的浏览器不支持

  • 语法：getComputedStyle(参数1，参数2).样式名
    • 参数1：要获取的元素节点
    • 参数2：传递一个伪类元素，没有可传null
  • 这是一个window对象的方法，所以可以和alert一样直接调用。
  • 该方法返回的是一个对象，我们可以用”.对象名”来获取对象的样式属性
  • 如果样式的属性没有设置，也会返回一个具体的值，而不是默认值。
    • 如：获取width属性，没有设置时可能会随着父标签的长度改变而改变，我们用这个方法可以获取到父元素的长度。

注意：通过currentStyle和getComputedStyle获取到的样式都是只读的，不可修改的，所以要修改还是要用style属性！
方法三：

方法三就是有我们自定义一个函数，其中包括前两种方法，视情况返回哪种方法

  1. // obj为元素节点对象，name为需要获取的样式名
  2. function getSty(obj,name){    
  3.       //如果网页有getComputedStyle方法，就执行此方法，不然就执行另一种方法
  4.     if(window.getComputedStyle){
  5.           //注意：由于这里使用变量调用，所以不能使用点操作符来获取，要使用[]来获取
  6.           return getComputedStyle(obj,null)[name];        
  7.     }else{
  8.           return obj.currentStyle[name];
  9.     }
  10. }

P110. 其他样式修改相关的属性

注意：以下方法返回的都是一个整数，如宽度不显示px，只显示数值。并且下面的方法都是只读的，不能修改，如果要修改使用style方法。

相关属性

clientWidth 和 clientHeight

  • 获取元素的可见宽度和可见高度，注意是可见高度和宽度
    • 如果样式表中设置的宽度为200px，但是由于内边距或其他原因显示的实际宽度更高，以实际的可见宽度为准，但是不包括边框宽度！
  • 返回的数值是不含px的宽度和高度
  • 语法：元素节点.clientWidth

offsetWidth 和 offsetHeight

  • 获取元素的整个高度和宽度
    • 这个不仅获取了可见宽度，包括内边距，边框都会算上去，是整个元素的宽度
  • 语法：元素节点.offsetWidth

offsetParent

  • 获取元素的定位父元素
    • 注意是”定位”父元素，所以获取到的其实是离当前元素最近的开启定位的祖先父元素，如果所以祖先元素都没有开启定位，则默认返回body。
  • 语法：元素节点.offsetparent

offsetTop 和 offsetLeft

  • 获取元素其定位父元素的垂直偏移量和水平偏移量
    • 注意：这里还是和上面一样，需要有开启定位的祖先父元素
  • 语法：元素节点.offsetTop

scrollWidth 和 scrollHeight

  • 获取元素整个滚动区域的宽度
    • 我们设置的子元素有时候可能会比父元素更宽或高，此时我们可能会使用overflow来设置子元素的显示方式。
    • 此方法可以获取到子元素真实的高度，或者父元素加上隐藏区域的高度
  • 语法：元素节点.scrollWidth

scrollLeft 和 scrollTop

  • 可以获取水平滚动条的和垂直滚动条滑动的距离
    • 需要在有滚动条的时候使用，不然返回0
    • 此方法在谷歌浏览器和个别浏览器返回的是小数！！

  • 语法：元素节点.scrollLeft

    两个重要等式

  • 当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条拖动到底了。

  • 当满足scrollWidth - scrollLeft == clientWidth，说明水平滚动条拖动到底了。

  • 因为clientHeight代表的是可见的高度，而scrollHeight代表着整个滚动区域的高度，当滚动的区域-滚动的距离的时候，减到0了，说明就到底了 ，如果遇到等式两端有小数的情况，可以使用parseInt()取整。

    表单disable属性

  • 如果一个表单控件的标签中的disable=”disable”时，该表单控件为不可用

  • 如果JS获取元素节点后，我们需要让表单控件不可用，可以让disable=true，反之可用为disable=false。