jQueryからJavascriptへの変換方法

                $('.day-of-week').css({ pointerEvents:'none' });
                $('.date-cell').css({ pointerEvents:'none' });
                $('.date-cell').addClass('is-disabled');
                $('.date-cell').children().css({
                    'background-color' : '#ffffff',
                    'color': '#4a4a4a',
                    'border-color': '#ffffff'
                });

上記のjQueryコードをJavascriptに変えたいのですが、どうすればいいか教えていただけませんでしょうか？javascriptにあまり慣れておらず、苦戦しております。

よろしくお願いします。

kei344

2017/12/09 17:05

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

KojiDoi

2017/12/09 18:39

そもそもjQueryのコードもjavascriptに他ならないので、論理的に矛盾した質問といえます。どうして「変えたい」のか、「変える」ことによって何を実現したいのかを書けば何らかのアドバイスが得られるかもしれません。

m.ts10806

2017/12/09 21:39

KojiDoiさんの仰る通りで、jQueryはjavascriptのライブラリでjavascriptそのものなので、ご存知かもしれませんがjQueryで出来ることは生javascriptでも全て実現可能です。jQueryのメソッドそれぞれの意味を理解できていれば、それに対応するjavascriptメソッドを探す（あるいは組み合わせる）ので実現可能ですよ。

行動規範の内容に同意します

回答3件

ベストアンサー

ざっとこんな感じ

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  if(document.querySelector('.day-of-week')){
3    Array.prototype.map.call(document.querySelectorAll('.day-of-week'),function(x){
4      x.style.pointerEvents='none';
5    });
6  }
7  if(document.querySelector('.date-cell')){
8    Array.prototype.map.call(document.querySelectorAll('.date-cell'),function(x){
9      with(x){
10      style.pointerEvents='none';
11        classList.add('is-disabled');
12        if(querySelector('*')){
13          Array.prototype.map.call(querySelectorAll('*'),function(y){
14            with(y.style){
15              backgroundColor='#ffffff';
16              color='#4a4a4a';
17              borderClor='#ffffff';
18            }
19          });
20        }
21      }
22    });
23  }
24});

HTML
1<div class="day-of-week">test1</div>
2<div class="day-of-week">test2</div>
3<div class="date-cell">test3</div>
4<div class="date-cell">
5<span>test4-1</span>
6<span>test4-2
7<span>test4-2-1</span>
8<span>test4-2-2</span>
9<span>test4-2-3</span>
10</span>
11<span>test4-3</span>
12</div>
13