美文网首页我爱编程
7_JavaScript_Html对象DOM

7_JavaScript_Html对象DOM

作者: Zd_silent | 来源:发表于2016-12-14 17:59 被阅读33次

Html文档对象DOM

基本概念

  1. 每个载入浏览器的 HTML 文档都会成为 Document 对象。
  • Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
  • Document 对象是 Window 对象的一部分
  • 当浏览器打开一个HTML文档时,浏览器解析HTML文档的标记,并创建表示这些标记的对象,这些对象就是HTML文档对象。
  • 文档对象即Document 对象,指的是一回事。

DOM常用方法

  1. 获取HTML文档对象的方法
    • getElementById() 返回对拥有指定 id 的第一个对象的引用。
    • getElementsByName() 返回带有指定名称的对象集合。
    • getElementsByTagName() 返回带有指定标签名的对象集合。
  • 其他方法
    • write() 向文档写 HTML 表达式 或 JavaScript 代码。
    • 温馨提示:文档加载之后使用docunment.write()会覆盖原文档.
```
<body>
    <h4 id="bt" class="bt">学生信息</h4>
    学号:<input type="text" id="number" class="number" value="111111"><br>
    姓名:<input type="text" id="name" class="name" value="木木"><br>
    英语:<input type="text" id="englist" class="english" name="score" value="60"><br>
    数学:<input type="text" id="math" name="score" value=""><br>

    <script type="text/javascript">
        var BT = document.getElementById('bt');
        var Score = document.getElementsByName('score');
        var Input = document.getElementsByTagName('input')
        document.write(BT.innerHTML+'<br>');
        document.write(Score[0].value+'<br>');
        document.write(Input[0].value+'<br>');
    </script>
</body>
```

改变 HTML 元素的样式

在 HTML DOM 中,Element 对象表示 HTML 元素。

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

  1. 获取元素的内容和标签名称
    • element.innerHTML 设置或返回元素的内容。
    • element.tagName 返回元素的标签名。
  2. HTML属性的获取
    • element.id 设置或返回元素的 id。
    • element.className 设置或返回元素的 class 属性。
    • element.title 设置或返回元素的 title 属性。
    • ......document.write(BT.id+'<br>');``BT.innerHTML="lala"
  • 改变CSS样式

    • 通过style属性操作内联式
      • 需要将下划线去掉并将第二个单词首字母大写,比如:
      • backgroundColor/backgroundImage/borderColormarginLeft......
        Inp[0].style.background='red'
    • 通过className
      • 先在样式表里class的样式,然后通过JS修改元素class
  • 操作HTML文档对象的属性

    • element.getAttribute() 返回元素节点的指定属性值。
    • element.setAttribute() 把指定属性设置或更改为指定值。
    • element.removeAttribute() 从元素中移除指定属性。

创建HTML文档对象

javascript中可以通过createElement()方法创建一个元素(节点)。

  1. createElement() 创建元素节点。
  • element.appendChild() 向元素添加新的子节点,作为最后一个子节点。
  • element.removeChild() 从元素中移除子节点。
var img1 = document.createElement('img');
img1.src='xx';
var div1 = document.getElementById('div1')
div1.appendChild(img1);
ul1.removeChild(li3)好像没用

DOM节点

将文档结构相像成一棵树,每一个部分(元素,属性,内容)都可以看做一个节点。

根据一个节点可以通过关系找到其他节点

  • 节点的属性:(名称、类型、值)
    1. element.nodeName 返回元素的名称。与element.tagName作用相同
      文本节点的名称为:#text;文档节点的名称为:#document.
    • element.nodeType 返回元素的节点类型。
      • 如果节点是元素节点,则 nodeType 属性将返回 1
      • 如果节点是属性节点,则 nodeType 属性将返回 2
      • 如果节点是文本节点,则 nodeType 属性将返回 3
    • element.nodeValue 设置或返回元素值。
      • 文本节点的nodeValue为文本内容
      • 属性节点的nodeValue为属性值
      • 元素节点无nodeValue
  • 子元素相关(可以类别CSS中的虚拟类别选择器)
    1. element.parentNode 返回元素的父节点。
    • element.childNodes 返回元素子节点的 NodeList。类似CSS中的子选择器
    • element.children 返回元素的子元素,该属性只返回元素节点。
    • element.firstChild和element.firstElementChild返回元素的首个子元素。类似CSS中的:e:first-child
    • element.lastChild 和element.lastElementChild返回元素的最后一个子元素。类似CSS中的: e:last-child
    function myFun1(){
            alert(div1.nodeName)
            alert(div1.tagName)
        }
        function myFun2(){
            alert(div1.nodeType)
        }
        function myFun3(){
            alert(div1.nodeValue)
            alert(input1.nodeValue)
        }
    
        function myFun4(){
            var ff=div1.parentNode.nodeName
            alert(ff)
        }
        function myFun5(){
            var ch=div1.childNodes
            alert(ch[2].nodeValue)
        }
    
  • 同级兄弟元素相关(可以类别CSS中的兄弟选择器)
    1. element.previousSibling element.previousElementSibling 返回位于相同节点树层级的前一个元素。
    • element.nextSibling element.nextElementSibling 返回位于相同节点树层级的下一个节点。类似CSS中的直接相邻选择器: h1+h2
  • 属性节点
    • element.attributes 返回元素属性的 NamedNodeMap。
    • element.insertBefore() 在指定的已有的子节点之前插入新节点。
  • element.replaceChild() 替换元素中的子节点。
  • .......
function myFun1(){
             ul1.firstElementChild.style.background='red'
             ul1.lastElementChild.style.background='green'
        }
        function myFun2(){
             // ul1.firstElementChild.nextElementSibling.style.background='red'
             // ul1.lastElementChild.previousElementSibling.style.background='green'
              if(ul1.firstElementChild){
                ul1.firstElementChild.nextElementSibling.style.background='red'
             }else{
                ul1.firstChild.nextSibling.style.background='red'
             }
        }
        
        function myFun3(){
            alert(input1.attributes[0].nodeName)
            alert(input1.attributes[1].nodeName)
            alert(input1.attributes[2].nodeName)
        }

        function myFun4(){
            var li5=document.createElement('li')
            li5.innerHTML="列表元素insert"
            ul1.insertBefore(li5,ul1.children[1])
        }
        
        function myFun5(){
            var li5=document.createElement('li')
            li5.innerHTML="列表元素insert"
            ul1.replaceChild(li5,ul1.children[1])
        }

练习:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style type="text/css">
       div{
           margin: 15px auto;
           background: orange;
           width: 300px;
           height: 240px;
           text-align: center;
           padding: 15px;
       }
       input{
           margin: 10px 10px;
           padding: 5px;
       }
   </style>
</head>
<body>
   <div>
       <h3>计算圆的面积</h3>
        <label for="radius">半径:</label>
        <input type="text" id="radius" ><br>
        <label for="area">面积:</label>
        <input type="text" id="area" ><br><br>
        <input type="button" id="js" value="计算" onclick="show()">
        <input type="button" id="cl" value="清空" onclick="cl()">
   </div>
   <script type="text/javascript">
       function area(r) {
           return Math.PI*r*r;
       }

       function show() {
           var radius = document.getElementById('radius').value;
           document.getElementById('area').value = area(radius)
       }

       function cl() {
           document.getElementById('radius').value = '';
           document.getElementById('area').value = '';
       }
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style type="text/css">
   img{
           border-style: groove;
           border-width: 5px;
           border-color: orange;
           display:none;
       }
       input[type='button']{
           width: 60px;
           height: 60px;
           border-radius: 30px;
           outline: none;
       }
   </style>
</head>
<body>
   <input type="text" id="imgUrl" value=""> <br>
   <input type="button" value="播放" onclick="autoPlay()">
   <input type="button" value="添加图片" onclick="addImage()"><br>
   <img src="" alt=""  height="300" id="img"><br>
   <script type="text/javascript">
       var imgArray = new Array();
       var index = 0;
       function autoPlay() {
           var imgObj = document.getElementById('img');
           imgObj.style.display = 'inline';
           if (imgArray.length <= 0) {
               imgObj.setAttribute('alt','木有图片');
           }else {
               index = (index+1)%imgArray.length;
               var imgId = imgArray[index];
               imgObj.setAttribute('src',imgId);
           }
           setTimeout('autoPlay()',1000);
       }

       function addImage(){
           var imgUrl=document.getElementById('imgUrl').value;
           imageArr.push(imgUrl)
       }
   </script>
</body>
</html>

相关文章

  • 7_JavaScript_Html对象DOM

    Html文档对象DOM 基本概念 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Docume...

  • jQuery对象和DOM对象

    jQuery对象和DOM对象的区别 DOM对象 jQuery对象 区别 jQuery对象不能使用DOM对象的成员,...

  • Virtual DOM

    Virtual DOM 虚拟 DOM 普通 JS 对象描述 DOM 对象 DOM 对象:成员多,成本高 虚拟 DO...

  • JQuery - 样式

    Ⅰ、DOM 与 JQuery对象 1. 把jQuery对象转成DOM对象 2. 把DOM对象转成jQuery对象 ...

  • 理解virtual dom

    Virtual DOM(虚拟 DOM), 是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象...

  • 虚拟DOM

    Virtual DOM Virtual DOM,是由普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以...

  • DOM对象跟jQuery对象相互转换

    jQuery的DOM对象与普通的DOM对象普通的DOM对象此处指的是:使用JS操作DOM的方法返回的对象jQuer...

  • js DOM

    1:什么是dom对象? dom对象就是html页面,dom对象的全称叫document object model(...

  • JQuery 对象与 DOM对象的转换

    1.JQuery对象转DOM对象 2.DOM对象转JQuery对象

  • Virtual DOM

    什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象...

网友评论

    本文标题:7_JavaScript_Html对象DOM

    本文链接:https://www.haomeiwen.com/subject/xgzimttx.html