2018/03/28 JavaScript学习日记---DOM

Burcat

于 2018-03-28 16:54:47 发布

阅读量128

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_41656361/article/details/79726791

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.介绍
dom : document object model 文档对象模型
DOM技术：js语言与html/xml之间沟通的桥梁。
DOM可以让我们通过js语言对html文档进行增删改查操作。
把html文档的组成内容划分为各种节点(对象)：

文档节点（document)，其实HTML根节点的父节点
元素节点
文本节点
属性节点
注释节点

2.三种方式获得元素节点对象(查找)
具体操作方法：

document.getElementById(id属性值)；
每次只返回一个元素节点对象

</head>
<body>
  <h2>获得节点元素</h2>
  <input type="text" id="username"  value="xiaoming"/><br />
  <input type="text" id="usermail"  value="xiaoming@qq.com"/><br />
  <input type="text" id="usertel"  value="123456789"/><br />
</body>
</html>
<script type="text/javascript">
   var tel = document.getElementById("usertel");
   console.log(tel);
</script>

document.getElementsByTagName(tag标签名称)；
每次返回一个集合列表对象，可以通过下标方式变为具体元素对象：列表[下标]或列表.item(下标)

</head>
<body>
  <h2>获得节点元素</h2>
  <input type="text" id="username"  value="xiaoming"/><br />
  <input type="text" id="usermail"  value="xiaoming@qq.com"/><br />
  <input type="text" id="usertel"  value="1234588889"/><br />
</body>
</html>
<script type="text/javascript">
   var hh = document.getElementsByTagName("h2");
   console.log(hh);
</script>

document.getElementsByName(tag标签名称)；
不推荐，有浏览器兼容问题，通常应用
在form表单里面

</head>
<body>
  <h2>获得节点元素</h2>
  <input type="text" id="username" name="1" value="xiaoming"/><br />
  <input type="text" id="usermail" name="2" value="xiaoming@qq.com"/><br />
  <input type="text" id="usertel" name="3" value="1234789"/><br />
</body>
</html>
<script type="text/javascript">
   var email  = document.getElementsByName('2');
   console.log(email);
</script>

3.获得文本节点

hello

需要借助div元素节点再获得其内部的文本节点；
dvnode.firstChild; //或调用lastChild，因为既是最大的也是最小的孩子节点

</head>
<body>
  <h2>获得文本节点</h2>
  <input type="text" id="username" name="1" value="xiaoming"/><br />
  <input type="text" id="usermail" name="2" value="xiaoming@qq.com"/><br />
  <input type="text" id="usertel" name="3" value="1234789"/><br />
</body>
</html>
<script type="text/javascript">
//元素节点对象。firstChild/lastChild;
        var hh = document.getElementsByTagName('h2')[0]
console.log('hh.firstChild');
//通过文本节点获得对应的文本信息
console.log(hh.firstChild.nodeValue);   //文本节点调用nodeValue获得文本信息
</script>

4.子节点和兄弟节点获取

firstChild,lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下一个兄弟节点
previousSibling:获得上一个兄弟节点
childNodes:父亲节点获得内部全部的子节点信息

</head>
<body>
  <h2>获取子节点</h2>
  <ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
  </ul>
  </body>
  </html>
<script type="text/javascript">
  var ull = document.getElementsByTagName('ul')[0];
console.log( ull.childNodes);
</script>

</head>
<body>
  <h2>获取兄弟节点</h2>
  <ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>重庆</li>
  </ul>
  </body>
  </html>
<script type="text/javascript">
  var guang = document.getElementsByTagName('li')[2];
console.log( guang.nextSibling.nextSibling);
console.log( guang.previousSibling.previousSibling);
</script>

</head>
<body>
  <h2>获取第一个节点</h2>
  <ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>重庆</li>
  </ul>
  </body>
  </html>
<script type="text/javascript">
  var hh = document.getElementsByTagName('h2')[0];
console.log(hh.firstChild);
</script>

5.获取父节点：parentNode

</head>
<body>
  <h2>子节点和兄弟节点</h2>
  <ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>重庆</li>
  </ul>
  </body>
  </html>
<script type="text/javascript">
  var hai = document.getElementsByTagName('li')[1];
console.log(hai.parentNode.parentNode);
</script>

6.属性操作
6.1 属性值操作

百度

获取属性值：
元素节点node.属性名称； //只能操作3c规定的属性
元素节点node.getAttribute(属性名称)； //规定的和自定义的都可以获取
设置(修改)属性值
元素节点node.属性名称 = 值； //只能只能操作3c规定的属性
元素节点node.setAttribute(属性名称)； //规定的和自定义的都可以设置

</head>
<body>
  <h2>属性值操作</h2>
<input type="text"  name="username" value="tom" class="orange" weight="130" /></br/>
<input type="button" value="触发"onclick="f1()" />
<input type="button" value="设置"onclick="f2()" />
</body>
</html>
<script type="text/javascript">
var nm = document.getElementsByTagName('input')[0];
function f1(){
  //获取
  console.log(nm.type);
  console.log(nm.value);
  console.log(nm.name);
  //console.log(nm.weight);    //自定义的获取不了
  console.log(nm.getAttribute('weight'));
  console.log(nm.className);      //class是js的关键字，需要变形为classname
}
function f2(){
//设置
  nm.name="usertel";
  nm.value ="1234"
  nm.className="banana";
//  nm.type = "checkbox";   //不推荐  可能不兼容
  //nm.weight="150";
  nm.setAttribute('weight',150);
}
</script>

获得表单域信息：元素节点对象.value；(获取后可以进行表单验证)

Burcat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018/03/28 JavaScript学习日记---DOM

1.介绍 dom : document object model 文档对象模型 DOM技术：js语言与html/xml之间沟通的桥梁。 DOM可以让我们通过js语言对html文档进行增删改查操作。把html文档的组成内容划分为各种节点(对象)：文档节点（document)，其实HTML根节点的父节点元素节点文本节点属性节点注释节点2.三种方式获得元素节点对象(查找) ...
复制链接

扫一扫