1.html 文档编写 js 代码的位置：

window.onload事件在整个html文档被完全加载完再执行，
    所以可以获取html文档的任何节点

js-window-onload.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    //window.onload事件在整个html文档被完全加载完再执行

    //所以可以获取html文档的任何节点

    window.onload = function() {

    };

</script>

</head>

<body>

    <button>Click</button>

</body>

</html>

2.获取元素节点方式

①. document.getElementById:

根据 id 属性获取对应的单个节点

②. document.getElementsByTagName:
                     根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

③. document.getElementsByName:
                     根据节点的 name 属性获取符合条件的节点数组,
                     但 ie 的实现方式和 W3C 标准有差别:
                     在 html 文档中若某节点(li)没有 name 属性,　
                     则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

dom-getNode.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>

<script type="text/javascript">

    //获取指定的元素节点.

    window.onload = function() {

        //1.获取id为bj的节点，编写文档时确保 id属性值是唯一的，该方法为document对象的方法

        var bjNode = document.getElementById("bj");

        alert(bjNode);

        //2.获取所有li节点，使用 标签名 获取节点的集合，该方法为Node接口的方法， 任何一个节点都有这个方法

        var liNodes = document.getElementsByTagName("li");

        alert(liNodes.length);

        var cityNode = document.getElementById("city");

        var cityLiNode = cityNode.getElementsByTagName("li");

        alert(cityLiNode.length);

        // 3.根据html文档元素的name属性名来获取指定的节点的集合

        var genderNodes = document.getElementsByName("gender");

        alert(genderNodes.length)

        //若html元素自身没有定义name属性，则getElementsByName(),此方法对于IE无效，所以使用该谨慎

        var bjNode2 = document.getElementsByName("BeiJing");

        alert(bjNode2.length)

    }

</script>

</head>

<body>

    <p>你喜欢哪个城市?</p>

    <ul id="city">

        <li id="bj" name="BeiJing">北京</li>

        <li>上海</li>

        <li>东京</li>

        <li>首尔</li>

    </ul>

    <br>

    <br>

    <p>你喜欢哪款单机游戏?</p>

    <ul id="game">

        <li id="rl">红警</li>

        <li>实况</li>

        <li>极品飞车</li>

        <li>魔兽</li>

    </ul>

    <br>

    <br> gender:

    <input type="radio" name="gender" value="male" />Male

    <input type="radio" name="gender" value="female" />Female

</body>

</html>

3. 获取属性节点:
          ①可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值

②通过元素节点的 getAttributeNode 方法来获取属性节点,
              然后在通过 nodeValue 来读写属性值

dom-getNode2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>

<script type="text/javascript">

    //读写属性节点

    window.onload = function() {

        // 属性节点即为某一指定元素节点的属性

        //1.先获取指定那个元素的节点

        var nameNode = document.getElementById("name");

        //2.读取指定属性的值

        alert(nameNode.value);

        //3.设置指定属性的值

        nameNode.value = "李静"

    }

</script>

</head>

<body>

    <p>你喜欢哪个城市?</p>

    <ul id="city">

        <li id="bj" name="BeiJing">北京</li>

        <li>上海</li>

        <li>东京</li>

        <li>首尔</li>

    </ul>

    <br>

    <br>

    <p>你喜欢哪款单机游戏?</p>

    <ul id="game">

        <li id="rl">红警</li>

        <li>实况</li>

        <li>极品飞车</li>

        <li>魔兽</li>

    </ul>

    <br>

    <br> name：

    <input type="text" name="username" id="name" value="xiaoxiaolin">

</body>

</html>

获取元素节点 & 操作属性节点的更多相关文章

  1. jacascript DOM节点——元素节点、属性节点、文本节点

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...

  2. 初探JavaScript（一）——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  3. HTMLDOM中三种元素节点、属性节点、文本节点的测试案例

    HTML dom中常用的三种节点分别是元素节点.属性节点.文本节点. 具体指的内容可参考下图: 以下为测试用例: <!DOCTYPE html> <html> <head ...

  4. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  5. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  6. DOM中元素节点、属性节点、文本节点的理解13.3

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返 ...

  7. DOM中元素节点，属性节点，文本节点的理解

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...

  8. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  9. 利用getComputedStyle方法获取元素css的属性值

    在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...

随机推荐

  1. CC2530应用——按键控制灯光状态变化

    独立新建工程并编写.编译代码,实现按键控制灯光闪烁状态的变换,实现以下任务要求:[1]程序开始运行:D4灯闪烁,D3.D5.D6灯熄灭.[2]按下模块上的SW1按键松开后,实现D5.D6灯轮流闪烁.[ ...

  2. nginx反向代理做负载均衡以及使用redis实现session共享配置详解

    1.为什么要用nginx做负载均衡? 首先我们要知道用单机tomcat做的网站,比较理想的状态下能够承受的并发访问在150到200, 按照并发访问量占总用户数的5%到10%技术,单点tomcat的用户 ...

  3. 万盛酒店餐饮管理系统（SpringBoot，SSM，MySQL ）

    项目源码获取地址: 链接:https://pan.baidu.com/s/1ip0keQruE2crA8vm1n8ZXQ 提取码:kivb 复制这段内容后打开百度网盘手机App,操作更方便哦 [功能包 ...

  4. Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现

    项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...

  5. MySQL基础总结（二）

    数据表的完整性约束条件 AUTO_INCREMENT (自增长) 注意事项: 1.一个表中只能有一个自增长字段 2.必须配合主键使用 方法1: 方法2: 方法3: 指定自增长初始值的方法: 修改自增长 ...

  6. Ubuntu 18.04 新系统 允许root远程登录

    1. 查看ssh服务器是否安装并启动 #sudo ps -e | grep ssh 1. 安装ssh服务器 #sudo apt-get install openssh-server 2. 配置sshd ...

  7. Power BI Desktop心得

    我是用钉钉邮箱做账号登录Power BI Desktop的.我用Power BI Desktop,做排版和统计. Power BI由Power Query和Power Pivot组成,前者有M语言,后 ...

  8. Elasticsearchdump 数据导入/导出

    一.安装过程 Elasticsearchdump 仓库地址,详细使用情况 当前工具主要是用来对ES中的数据进行数据导入/导出,以及对数据迁移相关,使用elasticdump工具需要使用到npm,所以需 ...

  9. zsteg

    以前知道zsteg,但是没有去安装使用,所以就一直没有使用. 最近在找有关lsb隐写的题,发现有些大佬的wp上面写用zsteg就解决了lsb隐写的题,自己就想,难道zsteg很方便,于是就去安装zst ...

  10. android 百度地图v3.2.0获取实际地址

    百度地图升级到v3.2.0后,api发生挺大的变化的,但是下载的Demo却不是最新版本的. 在v3.2.0之前获取详细地址只要:option.setIsNeedAddress(true); 但是升级后 ...