• DOM-基本概念及使用


     

     

    1、获取元素的方式总结

    1、根据 id 的属性的值获取元素,返回值是一个元素对象

    document.getElementById("id属性的值");

    2、根据标签名获取元素,返回值是包含多个元素对象的伪数组

    document.getElementsByTagName("标签名字");


    下面的几个,有的浏览器不支持。

    3、根据 name 属性的值获取元素,返回值是包含多个元素对象的伪数组

    document.getElementsByName("name属性的值");

    // 通过 name 属性获取元素适用于表单标签,基本标签没有 name 属性

    //基本标签:div,p,h1,ul,li,br等

    //表单标签:input, select,option,form,textarea,datalist,label等

     

    4、根据 class 类样式的名字获取元素,返回值是包含多个元素对象的伪数组

    document.getElementsByClassName("class类样式的值");
    ie8等低版本浏览器不支持此方法。此方法属于 h5 的

    5、根据 CSS 选择器获取元素,返回值是一个元素对象

    document.querySelector("#id属性的值");
    document.querySelector("标签的名字");
    document.querySelector(".class类样式的值");

    6、根据 CSS 选择器获取元素,返回值是包含多个元素对象的伪数组

    document.querySelectorAll("#id属性的值");
    document.querySelectorAll("标签的名字");
    document.querySelectorAll(".class类样式的值");

    注意:以上方法获取的元素的集合都是伪数组。

    判断伪数组的方式是伪数组不能调用数组的方法。(Boolean(list.sort) == false)或者使用instanceof (list instanceof Array)。

    伪数组怎么变为真数组?

    定义一个空数组,把伪数组的所有内容复制过去即可。

    注意点 知识点:

    1,innerText 常用于双标签里面的文本获取,而 value 常指的是 单标签 如 input 里面得的文本。

    2,阻止 a标签 跳转 在点击事件里面 添加 return false; 可以 a标签被点击事件 , 也可以是 a标签里面的 标签被点击事件。在事件里面添加 return false;

    3,document.body 可以选中 body 标签,document 指的是 整个 html 包括的 页面。而 body 是html 下面的一个 子元素。

    4,css 中的样式 如:background-color 在 js 下面操作样式时,要改写成 第一个字母大写的形式 如:backgroundColor。

    5,通过 对象.className = “” 来设置样式。而不是 对象.class 。不像其他属性的 设置。

    6,input 标签的 disabled ,文本框禁止被操作 。

    2,innerText 和 textContent innerHTML

    1、设置成对标签中文本内容:

    innerText 属性是 IE8 标准属性,chrome,fireFox,IE8都支持。低版本火狐不支持

    textContent 是W3C标准属性,chrome,firefox支持,IE8不支持。

    2、获取成对标签中文本内容:

    在 IE8 下使用 textContent 获取成对标签中文本内容,返回值为 undefined。

    那么说明,浏览器不支持的属性的类型都为 undefined.

    通过判断元素有无 textContent 属性(没有则元素的 textContent 属性为 undefined)来决定用 innerText 还是 textContent。

    **innerText 属性:**设置和获取只能得到文本内容。

    **innerHTML 属性:**不仅可以获得文本内容,还可以设置和获取 html 标签,让其显示或得到对应标签的格式。且任何浏览器都支持。

    innerText  textContent 和 innerHTML 都可以设置文本内容,推荐使用 innerHTML。

    innerHTML 和 innerText 是获取某个元素内部的内容,而outerHTML 和 outerText不仅获取某个元素内部的内容还包括这个元素本身内容。




    内容摘录自:https://github.com/Daotin/Web/tree/master/04-DOM
  • 相关阅读:
    DML
    DDL
    SQL的分类
    SQL语句的规范
    sql的演示
    运算符
    导入导出数据
    mysql的数据类型
    python+selenium2自动化---复用已有的浏览器
    python+selenium2自动化---通过js脚本给时间控件赋值
  • 原文地址:https://www.cnblogs.com/xixiaijunjun/p/10461600.html
Copyright © 2020-2023  润新知