JavaScript--DOM操作(一)

一、DOM获取元素

  1. 根据ID获取元素
  • document.getElementById('id');
  • 返回id的元素对象
  • console.dir()
  • 打印我们获取的元素对象
  1. 根据标签名获取
  • document.getElementsByTagName('**标签名**')
  • 返回带有指定标签的对象集合
  • 还可以获取某个元素(父元素)内部所有指定标签名的子元素
  • eg: element.getElementsByTagName('标签名')
  • 注意:父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己
    // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    // var lis = document.getElementsByTagName('li');
    varlis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
    for (vari = 0; i < lis.length; i++) {
      console.log(lis[i]);
    }
    // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
    // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
    // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
    // var ol = document.getElementsByTagName('ol'); // [ol]
    // console.log(ol[0].getElementsByTagName('li'));
    varol = document.getElementById('ol');
          console.log(ol.getElementsByTagName('li'));
  1. HTML5新增方法
  • document.getElementsByclassName('类名')//类名->对象集合 box li ......
  • document.getElemmentsquerySelector('选择器') //根据指定选择器返回第一个元素对象
  • document.grtElementsquerySelectorAll('选择器')//根据指定选择器返回所有元素对象
  • 注意:选择器获取元素方法里面的‘选择器’需要加符号 例如:.box #nav ......
  1. 获取特殊元素(body html)
  • document.body //返回body元素对象
  • document.html //返回html元素对象

    二、事件基础

    一、事件三要素

  1. 事件源 ----获取事件源
  2. 事件类型 ---- 绑定事件/注册事件
  3. 事件处理程序 ---- 添加处理程序 例如:function 等

    二、常见的鼠标事件

    onclick 鼠标点击左键触发
    onmouseover 鼠标经过触发
    onmouseout 鼠标离开触发
    onfous 获得鼠标焦点触发
    onblur 失去焦点触发
    onmousemove 鼠标移动触发
    onmouseup 鼠标弹起触发
    onmousedown 鼠标按下触发

三、操作元素

一、改变元素内容

  1. element.innerText---->不识别HTML标签 非标准

从起始位置到终止位置的内容,但它去除HTML标签,同时空格和换行也会去掉

  1. element.innerHTML---->W3C标准

从起始位置到终止位置的内容,包括HTML标签、换行和空格

二、表单元素的属性操作

type value checked selectde disable

<button>按钮</button>
<inputtype="text"value="输入内容">
    <script>
    // 1. 获取元素
    varbtn = document.querySelector('button');
varinput = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
    // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
    // 表单里面的值 文字内容是通过 value 来修改的
    input.value = '被点击了';
    // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
    // btn.disabled = true;
    this.disabled = true;
    // this 指向的是事件函数的调用者 btn
}
    </script>

三、样式属性操作

  1. 行内样式操作

element.style

  1. 类名样式操作

element.className
注意:JS里面采取驼峰命名法 JS修改style样式操作,产生的是行内样式,css权重比较高
eg: div.style.baclgroungColor = 'pink';

四、自定义属性的操作

  1. 获取属性值
  • element.属性 //获取内置属性值(元素本身自带的属性)
  • element.getAttribute('属性')//主要获得自定义的属性(标准 )我们程序员自定义的属性
  1. 设置属性值
  • element.属性 = '值'//设置内置属性值
  • element.setAttribute('属性','值')//主要设置自定义的属性(标准)
  1. 移除属性
  • element.removeAttribute('属性')
#前端开发#
前端基础开发 文章被收录于专栏

前端基础知识点

全部评论
感谢楼主分享,太有用了
1 回复 分享
发布于 2022-07-03 16:59

相关推荐

不要停下啊:大二打开牛客,你有机会开卷了,卷起来,去找课程学习,在牛客上看看大家面试笔试都需要会什么,岗位有什么需求就去学什么,努力的人就一定会有收获,这句话从来都经得起考验,像我现在大三了啥也不会,被迫强行考研,炼狱难度开局,啥也不会,找工作没希望了,考研有丝丝机会
点赞 评论 收藏
分享
VirtualBoo...:都去逗他了?
点赞 评论 收藏
分享
评论
点赞
3
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务